非常简单的气泡提示js（jquery）

最新推荐文章于 2024-07-21 22:10:10 发布

wufei006007008

最新推荐文章于 2024-07-21 22:10:10 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery function class input div

本文链接：https://blog.youkuaiyun.com/wufei006007008/article/details/4863772

本文介绍了一个简单的jQuery Tooltip插件实现方法，该插件能够为页面元素添加鼠标悬停提示功能。通过简单的配置，即可使带有title属性的元素显示自定义提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入 jquery.js，jquery.tooltip.v.1.1.js

//jquery.tooltip.v.1.1.js原文

/**
*
*    simpleTooltip jQuery plugin, by Marius ILIE
*    visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
    return this.each(function() {
        var text = $(this).attr("title");
        $(this).attr("title", "");
        if(text != undefined) {
            $(this).hover(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12;
                $(this).attr("title", "");
                $("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
                if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
                else var tipWidth = $("#simpleTooltip").width()
                $("#simpleTooltip").width(tipWidth);
                $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            }, function(){
                $("#simpleTooltip").remove();
                $(this).attr("title", text);
            });
            $(this).mousemove(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12;
                var tipWidth = $("#simpleTooltip").outerWidth(true);
                var tipHeight = $("#simpleTooltip").outerHeight(true);
                if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
                if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
                $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            });
        }
    });
}})(jQuery);