jquery ui tooltip 弹出样式修改

直入, 在页面中嵌入 如下代码:

<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>

你可能感兴趣的:(jquery ui tooltip 弹出样式修改)