演示地址: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>
- 浏览: 60663 次
相关推荐
实现效果: jQuery Tooltips悬停文字提示框效果,基于jQuery插件,可自定义显示位置,很不错的信息提示插件特效
css3 tooltips鼠标悬停显示消息提示框样式。完整的代码,方便学习。
jQuery Tooltips悬停提示效果.zip
ToolTips 简介 1 创建ToolTips 2 设置ToolTip风格 4 设置ToolTips宽度 6 ToolTip事件的使用 7 同NavBar控件使用ToolTips 8 使用ToolTip 管理器 9 激活和停止ToolTips 9 设置显示延迟时间 10...
一个基于PopupWindow的简单库用于在Android中创建Tooltips
鼠标跟随tooltips提示代码html源文件,javascript代码
gravity-tooltips, 将自定义字段添加到工具提示的每个表单元素中 三维重力工具提示在重力表单中添加自定义工具提示。注意:版本 2.0.0有许多以前版本的更改,包括 switch 使用 Kushagra Gour库使用 hint.css 库,并...
这是一款使用css3 transitions和伪元素制作的效果非常神奇的tooltips提示框动画效果。各种tooltips有气泡放大效果、旋转效果和滑动效果等等。
jQuery Tooltips悬停文字提示框效果,基于jQuery插件,可自定义显示位置,很不错的信息提示插件特效。
balloon.css是一款实用纯CSS3制作的简单实用的tooltips工具提示效果库。该tooltips通过简单的设置可以实现在不同位置显示提示框,根据内容的多少来自动设置提示框的大小,它还可以显示unicode编码和Font Awesome字体...
自定义的html5tooltips.js文件,实现高度自定义的气泡弹出窗口
html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件。该tooltips插件不依赖任何框架,内容可带HTML标签,并可以使用预设的CSS3动画来制作tooltips动画效果。
很酷的jquery,提示框, tooltips, 效果很多, 部分使用了比较复杂的动画, 需要加载jquery swing 库. 虽然文件大了点, 不过效果确实没得说.
qml 自定义实现 tooltips demo
tootik是一款纯CSS Tooltips工具提示特效库。该工具提示效果使用CSS3/SASS来制作,支持使用data属性来配置tooltips的位置和属性,效果非常炫酷。
zebra_tooltips用于创建简单而聪明工具提示插件,特点轻量级、高度可配置。演示地址:http://www.jq22.com/jquery-info370
asp.net(tooltips提示框)
tooltip.js是一款HTML5 tooltips工具提示jquery插件。tooltip.js可以通过js或html5 data属性来实例化一个tooltip。
balloon.css是一款实用纯CSS3制作的简单实用的tooltips工具提示效果库。该tooltips通过简单的设置可以实现在不同位置显示提示框,根据内容的多少来自动设置提示框的大小,它还可以显示unicode编码和Font Awesome字体...