Question

I am using JQuery plugin qtip for displaying tooltip in asp.net application.
Here is my code:

$("ul li").css("width","90px");
        $('ul li').each(function(){
            $(this).qtip({
               content: $(this).attr("title"),
               show: 'mouseover',
               hide: 'mouseout',
               position:{
                corner:{
                    target:'topRight',
                    tooltip: 'bottomLeft'    
                }
               },
               style:{
                width:150,
                padding:5,
                background: '#A2D959',
                color: 'black',
                textAlign: 'left',
                border: {
                width: 0,
                radius: 7,
                color: '#A2D959'
                },
                tip: 'bottomLeft',
                name: 'dark'
               }
            })
        });


<ul>
            <br />
            <li title="This is Item no. 1"><a>menu item111</a><br />
            <li title="This is Item no. 2"><a>menu item2222</a><br />
            <li title="This is Item no. 3"><a>menu item3333</a><br />
        </ul>
        <ul>
            <br />
            <li title="This is Item no. 4"><a>menu item4444</a><br />
            <li title="This is Item no. 5"><a>menu item5555</a><br />
            <li title="This is Item no. 6"><a>menu item6666</a><br />
        </ul>

If i move cursor over any li then both qtip tooltip and inbuilt html tooltip are displaying but i only want to display qtip tooltip.How can i do that.

You can also get help from given image.

Thanks

Answer 1

You can remove that title attribute after creating the qtip via .removeAttr(), like this:

$("ul li").css("width","90px")
          .each(function(){
    $(this).qtip({
       content: $(this).attr("title"),
       show: 'mouseover',
       hide: 'mouseout',
       position:{
        corner:{
            target:'topRight',
            tooltip: 'bottomLeft'    
        }
       },
       style:{
        width:150,
        padding:5,
        background: '#A2D959',
        color: 'black',
        textAlign: 'left',
        border: {
        width: 0,
        radius: 7,
        color: '#A2D959'
        },
        tip: 'bottomLeft',
        name: 'dark'
       }
    }).removeAttr("title");
});