2013-06-13 59 views
0

这是原始示例链接。 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(); 

} 
+2

您有什么问题?什么是问题? –

+0

'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-标题属性),而不是更符合。 –

+0

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

回答

0

你似乎有很多代码保姆安置的?如果你有把舌尖隐藏的内容,而不是作为一个虚构的属性,我觉得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>