轻巧的jQuery提示框插件Tipso演示

 !DOCTYPE html 

 html lang="zh-CN" 

 head 

 meta charset="utf-8" 

 title 轻巧的jQuery提示框插件Tipso演示_dowebok /title 

 script type="text/javascript" src="js/jquery-1.8.3.min.js" /script 

 script type="text/javascript" src="js/tipso.min.js" /script 

 link rel="stylesheet" href="css/tipso.min.css" 

 style 

 margin: 0;

 padding: 0;

 body {

 font-family: "Microsoft Yahei";

 h1 {

 padding: 45px 0;

 font: 32px "Microsoft Yahei";

 text-align: center;

 border: 1px solid red;

 .dowebok {

 width: 500px;

 margin: 30px auto 0;

 border: 1px solid red;

 .dowebok h2 {

 padding: 20px;

 font-size: 16px;

 font-weight: 400;

 background-color: #f5f5f5;

 border: 1px solid blue;

 .dowebok .inner {

 padding: 100px;

 text-align: center;

 border: 3px solid black;

 .dowebok p {

 position: relative;

 font-size: 14px;

 color: blueviolet;

 border: 1px solid red;

 height: 30px;

 .dowebok input {

 position: absolute; 

 top: 0px;

 left: 20px;

 margin-left: 40px;

 padding: 5px;

 border: 1px solid green;

 font-family: "Microsoft Yahei";

 .dowebok a{

 margin-top: 4px;

 float: right;

 margin-right: 30px;

 img{

 border: 2px solid blueviolet;

 /style 

 /head 

 body 

 h1 轻巧的jQuery提示框插件Tipso演示 /h1 

 div 

 h2 1、默认 /h2 

 div span id="tip1" data-tipso="dowebok.com1" Tipso /span /div 

 /div 

 div 

 h2 2、左边显示 /h2 

 div span id="tip2" data-tipso="dowebok.com" Tipso /span /div 

 /div 

 div 

 h2 3、背景颜色 /h2 

 div span id="tip3" data-tipso="dowebok.com" Tipso /span /div 

 /div 

 div 

 h2 4、使用title属性 /h2 

 div span id="tip4" title="内容来自 title 属性" Tipso /span /div 

 /div 

 div 

 h2 5、单击显示/隐藏 /h2 

 div 

 span id="tip5" data-tipso="dowebok" Tipso /span 

 p a id="btn5" href="javascript:" 显示 /a /p 

 /div 

 /div 

 div 

 h2 6、更新内容 /h2 

 div 

 span id="tip6" data-tipso="dowebok.com2" Tipso /span 

 input type="text" a id="btn6" href="javascript:" 更新 /a 

 /div 

 /div 

 div 

 h2 7、在图片上使用 /h2 

 div 

 img id="tip7" src="images/tipso.png" alt="111" data-tipso="dowebok.com" 

 /div 

 /div 

 div 

 h2 8、回调函数 /h2 

 div 

 span id="tip8" data-tipso="dowebok.com" Tipso /span 

 p 状态： em id="status" /em /p 

 /div 

 /div 

 script 

 $(function() {

 // 1

 $(#tip1).tipso({

 useTitle: false

 // 2

 $(#tip2).tipso({

 useTitle: false,

 position: bottom

 // position: left //right,top

 // 3

 $(#tip3).tipso({

 useTitle: false,

 background: tomato

 // 4

 $(#tip4).tipso();

 // 5

 $(#tip5).tipso({

 useTitle: false

 $(#btn5).on({

 click: function(e) {

 if ($(this).text() == 显示) {

 $(this).text(隐藏);

 $(#tip5).tipso(show);

 } else {

 $(this).text(显示);

 $(#tip5).tipso(hide);

 e.preventDefault();

 // 6

 $(#tip6).tipso({

 useTitle: false

 $(#btn6).on(click, function() {

 var $val = $(this).prev().val();

 if ($val) {

 $(#tip6).tipso(update, content, $val);

 // 7

 $(#tip7).tipso({

 useTitle: false

 // 8

 $(#tip8).tipso({

 useTitle: false,

 onBeforeShow: function() {

 alert(1);

 $(#status).html(beforeShow);

 onShow: function() {

 alert(2);

 $(#status).html(show);

 onHide: function() {

 $(#status).html(hide);

 alert(3);

 /script 

 a href="http://www.dowebok.com/" target="_blank" dowebok.com /a 

 a href="http://www.dowebok.com/147.html" target="_blank" 说 明 /a 

 a href="http://www.dowebok.com/147.html" target="_blank" 下 载 /a 

 !-- 以下是统计及其他信息，与演示无关，不必理会 -- 

 style 

 .vad {

 margin: 50px 0 30px;

 font-family: Consolas, arial, 宋体, sans-serif;

 text-align: center;

 .vad a {

 display: inline-block;

 height: 36px;

 line-height: 36px;

 margin: 0 5px;

 padding: 0 50px;

 font-size: 14px;

 text-align: center;

 color: #eee;

 text-decoration: none;

 background-color: #222;

 .vad a:hover {

 color: #fff;

 background-color: #000;

 /style 

 /body 

 /html