Search code examples
jquerypluginsqtip

qTip-2 jquery - change plugin?


Hey there i just read the documenation from a nice jquery-plugin, i also read some demonstrations and i just wondered if i can change this:

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

can this be changed to a list? I mean, Instead of:

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

Use:

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

Is this possible? greetings


Solution

  • 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!
    
    });