Question

我想要这样的东西..但不能正常工作

<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(); 

}

Answer 1

您似乎有很多代码可以放置宝宝吗？如果您将提示作为隐藏内容而不是作为一个虚构属性，那么我认为您会发现这更简单：

<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>

jquery工具提示onclick函数

1 个答案: