这是原始示例链接。http://jsfiddle.net/SKryM/
我想要这个东西..但不工作
<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();
}