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工具提示。我该怎么做。

您也可以从给定图像中获得帮助。 alt text 感谢

Answer 1

您可以在通过.removeAttr()创建qtip后删除该title属性，如下所示：

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

更改

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

Jquery插件qtip帮助

3 个答案: