jquery - jquery插件qtip帮助

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您可以在通过 创建 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");
});

Answer 2

将 title 属性重命名为 customtitle 之类的其他名称

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

并使用

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

Answer 3

Changes

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

with regards

Wazzy