直入， 在页面中嵌入 如下代码：
<div class="promotion"> <code data-toggle="tooltip" data-placement="bottom" title="我爱你">啦啦</code> </div>
在body中，上面代码同一个标签下 插入如下：
<script type="text/javascript">
$(function () {
$(document).tooltip();
});
</script>
完成了一般。注意在html header 中引入：
jquery-ui-1.10.3.custom.css
jquery-ui-1.10.3.custom.js
如果想修改弹出层样式，打开jquery-ui-1.10.3.custom.css，查找tooltip
看到如下代码，对下面css修改就可以修改弹出层样式，快来试试吧~
/*
* jQuery UI Tooltip 1.10.3
*
* Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://jqueryui.com/tooltip/
*/
.ui-tooltip {
display: block;
font-size: 11px;
opacity: 0.8;
position: absolute;
visibility: visible;
z-index: 1024;
max-width: 200px;
}
.ui-tooltip {
background: white;
border: 1px solid #000000;
}
.ui-tooltip {
color: #000000;
padding: 3px 8px;
text-align: center;
text-decoration: none;
/* -webkit-box-shadow: inset 0 1px 0 #000000; /* Safari 4 */
/* -moz-box-shadow: inset 0 1px 0 #000000; /* Firefox 3.6 */
/* box-shadow: inset 0 1px 0 #000000; */
border-radius: 4px 4px 4px 4px;
}
body .ui-tooltip {
border-width: 1px;
border-color:orange;
}
下面一段代码是摘自网络，更直接的直接贴入 w3cschool 实验一下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jQuery UI修饰title属性的气泡悬浮框（Tooltip） - 柯乐义</title>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://www.keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/themes/sunny/jquery-ui.min.css" />
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery/ui/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).tooltip();
});
</script>
<style type="text/css">
label {
display: inline-block;
}
</style>
</head>
<body>
<h2>不一样的悬浮提示框</h2>
如果为一个元素添加了title属性，那么当光标移到该元素上时，会在元素旁显示出一个悬浮提示框。
一般悬浮提示框是无法使用样式修饰的，但如果使用<a href="http://www.keleyi.com/menu/jquery/" title="jQuery特效、资料等学习内容。" target="_blank">jQuery</a> UI，则可以显示不同效果了，方法很加单：$(document).tooltip(); 把光标移到输入框(或超链接)上看看悬浮提示框的效果吧。
<label for="age">Email：</label><input id="age" title="可作为取回密码的手段，建议填写。" />
<a href="http://www.keleyi.com" target="_blank" title="柯乐义首页">柯乐义</a>
现在是样式一
<a href="http://www.keleyi.com/keleyi/phtml/tooltip/tooltip2.htm" title="样式二：redmond">样式二</a>
<a href="http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm" target="_blank" title="查看原文">原文</a>
</body>
</html>
时间： 2024-10-30 01:52:24