乐泰花艺培训学校

--站内查询--

文章排行榜
推荐课程
作品共享
网站开发
Tooltips 提示效果,select和input可以自定义提示
作者:乐泰    编辑:hew786    来自:乐泰艺术培训学校    浏览:1525次    发布:2010/10/19 [ 字号: ]
<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>
推荐信息
评论(1)条
评论姓名:  
 
  • cialis -- 2018/1/7 17:17:15
    Nothing  found  for  generisches  cialis  kaufe-ontario-canada  .