Jquery-Plugin qtip Hilfe

Question

Ich benutze JQuery-Plugin qtip zur Anzeige Tooltip in asp.net-Anwendung. Hier ist mein 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> 

Wenn ich den Cursor über jedem li dann beide qtip Tooltip und eingebauten HTML Tooltip bewegen, werden die Anzeige, aber ich möchte nur qtip tooltip.How angezeigt werden kann ich das tun.

Sie können auch Hilfe von gegebenem Bild erhalten. Dank

Answer 1

können Sie entfernen, dass title Attribut nach dem qtip über .removeAttr(), wie dies zu schaffen:

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

den Titel-Attribut auf etwas anderes wie customtitle

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

und

verwenden umbenennen

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

Answer 3

Änderungen

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

in Bezug

Wazzy