qTip-2 jquery - 更改插件?

时间:2013-12-05 20:59:57

标签: jquery plugins qtip

嘿,我刚刚从一个漂亮的jquery-plugin阅读了文档,我还阅读了一些演示文稿,我只是想知道我是否可以改变它:

http://jsfiddle.net/craga89/T9GHJ/

可以将其更改为列表吗? 我的意思是, 而不是:

<table> 
    <tr>
        <td></td>

使用:

<ul>
    <li></li> // ..

这可能吗?问候

2 个答案:

答案 0 :(得分:1)

http://craigsworks.com/projects/qtip/demos/

此处的示例适用于List,所以答案是肯定的,你可以!!

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

http://craigsworks.com/projects/qtip/docs/#structure

答案 1 :(得分:1)

Yes

<强> HTML

<ul id="ul1">
    <li data-browser="firefox">Firefox</li>
    <li data-browser="ie">IE</li>
    <li data-browser="opera">Opera</li>
</ul>

<强> JS

$("#ul1").on('mouseenter', 'li[data-browser]', function (event) {
    var browser = $(this).data('browser');

    $(this).qtip({
        overwrite: false,
        content: '<img src="http://media1.juggledesign.com/qtip2/images/browsers/64-' + browser + '.png" alt="' + browser + '"/>',
        position: {
            my: 'right center',
            at: 'left center',
            target: $(this),
            viewport: $('#ul1')
        },
        show: {
            event: event.type,
            ready: true
        },
        hide: {
            fixed: true
        }
    }, event); // Note we passed the event as the second argument. Always do this when binding within an event handler!

});