jquery tooltip onclick函數

這是原始示例鏈接。 http://jsfiddle.net/SKryM/jquery tooltip onclick函數

我想這樣的事情..但沒有工作

<div onclick="tooltip(this);" xtitle="This is a tooltip">Hello</a>

---------------------------- --------------- jQuery的---------------------------------- -------

/* start of plugin code */ 
(function($) { 

    $.fn.easyTooltip = function(options){ 

     // default configuration properties 
     var defaults = {  
      xOffset: 10,   
      yOffset: 25, 
      tooltipId: "easyTooltip", 
      clickRemove: true, 
      content: "", 
      useElement: "" 
     }; 

     var options = $.extend(defaults, options); 
     var content; 

     this.each(function() {     
      var title = $(this).attr("xtitle");     

      $(this).click(function(e) { 
       /* the following code was originially inside the .hover handler */ 
       /* start */ 
       content = (options.content != "") ? options.content : title; 
       content = (options.useElement != "") ? $("#" + options.useElement).html() : content; 
       $(this).attr("title","");              
       if (content != "" && content != undefined){    

        if($("#" + options.tooltipId).length == 0) { 
         $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");   
        } 
        $("#" + options.tooltipId) 
         .css("position","absolute") 
         .css("top",(e.pageY - options.yOffset) + "px") 
         .css("left",(e.pageX + options.xOffset) + "px")       
         .css("display","none") 
         .fadeIn("fast") 
       } 
       /** end **/ 

      }); 
      $(this).hover(function(e){ 
       /* orginal code that was here has been moved to the click handler */ 
       e.preventDefault(); 
       return true; 
      }, 
      function(){  
       $("#" + options.tooltipId).remove(); 
       $(this).attr("title",title); 
      }); 


      $(this).mousemove(function(e){ 
       $("#" + options.tooltipId) 
        .css("top",(e.pageY - options.yOffset) + "px") 
        .css("left",(e.pageX + options.xOffset) + "px")      
      });  
      if(options.clickRemove){ 
       $(this).mousedown(function(e){ 
        $("#" + options.tooltipId).remove(); 
        $(this).attr("title",title); 
       });     
      } 
     }); 

    }; 

})(jQuery); 
/* end of plugin code */ 

// testing 
//$('a').easyTooltip(); 

function tooltip(caller){ 
    $(caller).easyTooltip(); 

}

來源

2013-06-13 Divyesh

您有什麼問題？什麼是問題？ –

'xtitle'不是有效的HTML屬性。我不確定這是一個插件還是你製作的東西，但是你可能想把它改成['data-title']（http://www.w3.org/TR/html5/dom。 html＃embedding-custom-non-visible-data-with-the-data - * - attributes）或簡單的['title']（http://www.w3.org/TR/html5/dom.html#the-標題屬性），而不是更符合。 –

它爲我工作。 http://jsfiddle.net/M3sNe/ –

你似乎有很多代碼保姆安置的？如果你有把舌尖隱藏的內容，而不是作爲一個虛構的屬性，我覺得OK，你會發現這是更簡單的方法：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".hasTip").click(function(){ 
     $(this).find(".tip").toggle(); 
    }); 
}); 
</script> 
<style>.tip{margin-top:15px;position:absolute;display:none;border:1px solid black;background-color:#DDEEFF;padding:0 3 0 3;} 
</style> 
<div class="hasTip"> 
    <span class="tips">This is a tooltip</span> 
    Hello 
</div>

來源

2016-06-29 18:16:30 gordon

jquery tooltip onclick函數

回答

相關問題