鼠标悬浮提示框

第一个例子:

html:

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

js:

$(document).ready(function() {
    $('.toolTip').hover(
        function() {
        this.tip = this.title;
        $(this).append(
            '
' +'
' +'
' +this.tip +'
' +'
' +'
' ); 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="">点击显示提示信息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 = $("
") .addClass("yellow") .html("

" + "

" + "

"); 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 = $("
") .addClass("yellow") .html("

" + "

" + "

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

转载于:https://www.cnblogs.com/lishupeng/p/5641538.html

你可能感兴趣的:(鼠标悬浮提示框)