1

asp.netアプリケーションでツールチップを表示するためにJQueryプラグインqtipを使用しています。これが私のコードです：

$("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ツールチップのみを表示したいのですが、どうすればよいですか。

また、与えられた画像から助けを得ることができます。 代替テキスト ありがとう

4

3 に答える 3

0

次のように、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");
});
于 2011-01-03T12:56:13.053 に答える
0

title属性の名前をcustomtitleなどの他の名前に変更します

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

と使用

content: $(this).attr("customtitle"),
于 2011-01-03T12:57:19.657 に答える
0

変更点

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

に関して

ワジー

于 2011-01-03T13:00:55.520 に答える