Справка по плагину JQuery

Question

Я использую плагин JQuery qtip для отображения всплывающей подсказки в приложении asp.net. Вот мой код:

$("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>

Если я наведу курсор на любой li, то отобразятся как всплывающая подсказка qtip, так и встроенная подсказка html, но я хочу только отобразить подсказку qtip. Как я могу это сделать.

Вы также можете получить помощь по данному изображению. Спасибо

Answer 1

переименуйте атрибут title во что-то другое, например, customtitle

<li customtitle="this is item no.1><a>menu item111</a></li>

и используйте

content: $(this).attr("customtitle"),

Answer 2

Изменения

$("ul li").css("width","90px");
        $('ul li').each(function(){
            $(this).qtip({
               content: $(this).attr("rel"), // changes are here
               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 rel="This is Item no. 1"><a>menu item111</a><br /> // and here
            <li rel="This is Item no. 2"><a>menu item2222</a><br />// and here
            <li rel="This is Item no. 3"><a>menu item3333</a><br />// and here
        </ul>
        <ul>
            <br />
            <li rel="This is Item no. 4"><a>menu item4444</a><br />// and here
            <li rel="This is Item no. 5"><a>menu item5555</a><br />// and here
            <li rel="This is Item no. 6"><a>menu item6666</a><br />// and here
        </ul>

в отношении

Wazzy

Answer 3

Вы можете удалить этот атрибут title после создания qtip через .removeAttr(), например:

$("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");
});