鼠标悬浮提示框

Posted 2020-08-03 ..小树苗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标悬浮提示框相关的知识，希望对你有一定的参考价值。

第一个例子：

<h1>Example of simple jQuery tooltip<span class="toolTip" title="This is a simple tooltip made with jQuery">&nbsp;</span></h1>

js:

$(document).ready(function() {
    $(‘.toolTip‘).hover(
        function() {
        this.tip = this.title;
        $(this).append(
            ‘<div class="toolTipWrapper">‘
                +‘<div class="toolTipTop"></div>‘
                +‘<div class="toolTipMid">‘
                    +this.tip
                +‘</div>‘
                +‘<div class="toolTipBtm"></div>‘
            +‘</div>‘
        );
        this.title = "";
        this.width = $(this).width();
        $(this).find(‘.toolTipWrapper‘).css({left:this.width-22})
        $(‘.toolTipWrapper‘).fadeIn(300);
    },
    function() {
        $(‘.toolTipWrapper‘).fadeOut(100);
        $(this).children().remove();
            this.title = this.tip;
        }
    );
});

第二个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标悬停动态显示提示文字或者图片</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
*{ margin: 0; padding: 0;}
body{ padding: 200px; font-size: 12px; background-color: #f0f0f0;}
.tooltips{ border-width: 1px; border-style: solid; position: absolute; display: none; border-radius: 3px; opacity: 0; filter:alpha( opacity = 0) ; z-index: 999;}
.tooltips p.content{ padding: 5px; }
.tooltips .triangle-front,.tooltips .triangle-back{ width: 0; height: 0; overflow: hidden; border-width: 8px; border-style: solid; position: absolute; border-color: transparent ; top: 100%; left: 50%; margin-left: -8px;}
.tooltips .triangle-back{ margin-top: -1px;}

.yellow{ border-color: #c7c08d; background-color: #fffac3;}
.yellow .triangle-front{ border-top-color: #c7c08d;}
.yellow .triangle-back{ border-top-color: #fffac3;}

a{ padding: 5px; margin-right: 20px; border: 1px solid #cc00dd;}
</style>
</head>

<body>
<style>
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;}
</style>
<div class="baidu_ads">
<script type="text/javascript">
var sogou_ad_id=395091;
var sogou_ad_height=90;
var sogou_ad_width=960;
</script>
<script type=‘text/javascript‘ src=‘http://images.sohu.com/cs/jsfile/js/c.js‘></script>
</div>

<span style="display:none;">
<script src="http://s94.cnzz.com/stat.php?id=4106941&web_id=4106941" language="JavaScript"></script>
</span><center>
<a href="javascript:" id="ahover" tooltips="这里是hover的tips">鼠标滑过自动显示</a>
<a href="javascript:" id="aclick" tooltips="<img src=‘lanrenzhijia.png‘>">点击显示提示信息</a>
</center>
<script>
$.fn.extend({
    hoverTips : function (){
        var self = $(this);
        var sw = self.get(0).switch;
        if( !sw ) {
            sw = true;
            var content = self.attr("tooltips");
            var htmlDom = $("<div class=‘tooltips‘>")
                    .addClass("yellow")
                    .html("<p class=‘content‘></p>"
                            + "<p class=‘triangle-front‘></p>"
                            + "<p class=‘triangle-back‘></p>");
            htmlDom.find("p.content").html( content );
        }
        self.on("mouseover",function(){
            $("body").append( htmlDom );
            var left = self.offset().left - htmlDom.outerWidth()/2 + self.outerWidth()/2;
            var top = self.offset().top - htmlDom.outerHeight() - parseInt(htmlDom.find(".triangle-front").css("border-width"));
            htmlDom.css({"left":left,"top":top - 10,"display":"block"});
            htmlDom.stop().animate({ "top" : top ,"opacity" : 1},300);
        });
        self.on("mouseout",function(){
            var top = parseInt(htmlDom.css("top"));
            htmlDom.stop().animate({ "top" : top - 10 ,"opacity" : 0},300,function(){
                htmlDom.remove();
                sw = false;
            });
        });
    },
    clickTips : function (){
        var self = $(this);
        var sw = self.get(0).switch;
        if( !sw ) {
            sw = true;
            var content = self.attr("tooltips");
            var htmlDom = $("<div class=‘tooltips‘>")
                    .addClass("yellow")
                    .html("<p class=‘content‘></p>"
                            + "<p class=‘triangle-front‘></p>"
                            + "<p class=‘triangle-back‘></p>");
            htmlDom.find("p.content").html( content );
        }
        self.on("click",function(){
            $("body").append( htmlDom );
            var left = self.offset().left - htmlDom.outerWidth()/2 + self.outerWidth()/2;
            var top = self.offset().top - htmlDom.outerHeight() - parseInt(htmlDom.find(".triangle-front").css("border-width"));
            htmlDom.css({"left":left,"top":top - 10,"display":"block"});
            htmlDom.stop().animate({ "top" : top ,"opacity" : 1},300, function(){
                setTimeout(function(){
                    htmlDom.stop().animate({"top":top - 10 ,"opacity" : 0},300,function(){
                        htmlDom.remove();
                        sw = false;
                    })
                },2000)
            });
        })
    }
});

$("#ahover").hoverTips();
$("#aclick").clickTips();
</script>
</body>
</html>

第三个例子：

http://www.oschina.net/code/snippet_197014_15484

以上是关于鼠标悬浮提示框的主要内容，如果未能解决你的问题，请参考以下文章

c#winform中label 标签鼠标悬浮上去，怎么出现一个提示框！

Eclipse 悬浮提示