jquery ui tooltip 弹出样式修改

最新推荐文章于 2021-06-16 17:46:40 发布

weixin_34406086

最新推荐文章于 2021-06-16 17:46:40 发布

阅读量491

点赞数

文章标签： ui javascript python ViewUI

原文链接：https://my.oschina.net/xiaomianyang/blog/516299

版权

2019独角兽企业重金招聘Python工程师标准>>>

直入，在页面中嵌入如下代码：

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

转载于:https://my.oschina.net/xiaomianyang/blog/516299