演示地址:http://www.corange.cn/demo/3696/index.html
<html>
<head>
<title>Tooltips 提示效果，select和input可以自定义提示</title>?
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
"></script>
<script type="text/javascript" src="inc/jquery.timers.js"></script>
<script type="text/javascript" src="inc/jquery.dropshadow.js"></script>
<script type="text/javascript" src="inc/mbTooltip.js"></script>
<link rel="stylesheet" type="text/css" href="css/mbTooltip.css" title="style1" media="screen">
<script>
$(function(){
$("[title]").mbTooltip({ // also $([domElement]).mbTooltip >> in this case only children element are involved
opacity : .97, //opacity
wait:400, //before show
cssClass:"default", // default = default
timePerWord:70, //time to show in milliseconds per word
hasArrow:false, // if you whant a little arrow on the corner
hasShadow:true,
imgPath:"images/",
ancor:"mouse", //"parent" you can ancor the tooltip to the mouse position or at the bottom of the element
shadowColor:"black", //the color of the shadow
mb_fade:200 //the time to fade-in
});
});
</script>
<body>
<div style="background:#ccc; padding:10px">
<button title="you can disable tooltip by clicking here" onClick="$(document).disableTooltip()">disable tooltip</button><button title="you can enable tooltip by clicking here" onClick="$(document).enableTooltip()">enable tooltip</button><button title="add a new line with tooltip crated live" onClick="$.ajax({url: 'test.html', cache: false, success: function(html){$('#newline').append(html);}})">add line with tooltip</button><br><br><br>
</div><br><br><br><br>
<span style=" background:white;padding:5px; -moz-border-radius:5px" id="pippo" title="Lorem ipsum dolor sit amet" >prova tooltip (span)</span>
<div style=" background:white;padding:5px; -moz-border-radius:5px; width:300px" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Vivamus sit amet erat.">prova tooltip 2 (div)</div>
<br>
<br>
<input style=" background:white;padding:5px; -moz-border-radius:5px" type="text" title="1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit." value="input">
<input style=" background:white;padding:5px; -moz-border-radius:5px" type="text" title="2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit." value="input">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sit amet erat. <span title="Vestibulum ante ipsum primis in"><b>Nulla eleifend</b></span>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
<div id="newline"></div>
<select id="select1" title="this is a select" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<input type="text" id="entry1" class="dateInput" title="aaaa"/>
</body>
</html>?
原文地址:http://www.corange.cn/archives/2010/10/3696.html