首页>>Jquery文字>>Tooltip效果，支持html内容(2013-12-20)

Tooltip效果，支持html内容

Tooltip效果，支持html内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <div id="content">  
  2.   
  3.    <div class="content-box">  
  4.      <div id="wTooltip1" class="hoverBox">hover me</div>  
  5.      <div id="wTooltip2" class="hoverBox" title="Title from title attribute">hover me</div>  
  6.      <div id="wTooltip3" class="hoverBox">hover me</div>  
  7.      <div id="wTooltip4" class="hoverBox active" onClick="tooltip_toggle();">click me</div>  
  8.      <div id="wTooltip5" class="hoverBox" title="This is tooltip 5">hover me</div>  
  9.      <div id="wTooltip6" class="hoverBox" title="This is tooltip 6">hover me</div>  
  10.      <div id="wTooltip7" class="hoverBox" title="This is <span style='color:red;'>html</span>">hover html</div>  
  11.      <div id="wTooltip8" class="hoverBox" title="This is <span style='color:red;'>html</span>">hover no html</div>  
  12.      <div id="wTooltip9" class="hoverBox active" title="<span style='color:red;'>no html</span>" onClick="html_toggle();">click me</div>  
  13.      <div id="wTooltip10" class="hoverBox active" title="<span style='color:red;'>no html</span>" onClick="html_toggle2();">click me</div>  
  14.      <div id="wTooltip11" class="hoverBox" title="Home">hover me</div>  
  15.      <div id="wTooltip12" class="hoverBox">hover me</div>  
  16.        
  17.      <div class="mooTest" title="moo">moo</div>  
  18.      <div class="mooTest" title="poo">poo</div>  
  19.      <div class="mooTest" title="zoo">zoo</div>  
  20.   
  21.      <link rel="Stylesheet" type="text/css" href="./wTooltip.css" />  
  22.      <script type="text/javascript" src="./wTooltip.js"></script>  
  23.   
  24.      <style>  
  25.        .hoverBox{  
  26.          display: inline-block;  
  27.          *display: inline;  
  28.          zoom: 1;  
  29.          margin: 10px;  
  30.          padding: 10px 30px;  
  31.          border: solid #CACACA 1px;  
  32.          cursor: pointer;  
  33.        }  
  34.      </style>  
  35.   
  36.      <script type="text/javascript">  
  37.        $('.mooTest').wTooltip();  
  38.   
  39.        console.log($('.mooTest').wTooltip('opacity'));  
  40.        $('.mooTest :first').wTooltip('opacity', 0.2)  
  41.        console.log($('.mooTest').wTooltip('opacity'));  
  42.   
  43.        $("#wTooltip1").wTooltip();  
  44.          
  45.        $("#wTooltip2").wTooltip({  
  46.          timeToStop: 2000,  
  47.          theme: "blue"  
  48.        });  
  49.          
  50.        $("#wTooltip3").wTooltip({  
  51.          position: "mouse",  
  52.          timeToStop: 2000,  
  53.          theme: "plum"  
  54.        });  
  55.          
  56.        $("#wTooltip4").wTooltip({  
  57.          position: "mouse",  
  58.          title: "This box is on",  
  59.          theme: "green"  
  60.        });  
  61.          
  62.        $("#wTooltip5, #wTooltip6").wTooltip({position: "mouse", theme:'white'});  
  63.        $("#wTooltip7").wTooltip({theme:'orange'});  
  64.        $("#wTooltip8").wTooltip({html:false, theme:'black'});  
  65.        $("#wTooltip9").wTooltip({html:false, theme:'red'});  
  66.        $("#wTooltip10").wTooltip({html:false, theme:'cream'});  
  67.        $("#wTooltip11").wTooltip({html:false, theme:'black'});  
  68.        $("#wTooltip12").wTooltip({html:false, theme:'yellow'});  
  69.   
  70.        function tooltip_toggle() {  
  71.          if($("#wTooltip4").hasClass("active")) {  
  72.            $("#wTooltip4").removeClass("active");  
  73.            $("#wTooltip4").wTooltip("title", "This box is off");  
  74.          }  
  75.          else {  
  76.            $("#wTooltip4").addClass("active");  
  77.            $("#wTooltip4").wTooltip("title", "This box is on");  
  78.          }  
  79.        }  
  80.          
  81.        function html_toggle() {  
  82.          $("#wTooltip9").wTooltip("title", "<span style='color:red;'>still no html</span>");  
  83.        }  
  84.          
  85.        function html_toggle2() {  
  86.          $("#wTooltip10").wTooltip('html', true);  
  87.          $("#wTooltip10").wTooltip('title', '<span style="color:red;">yes html</span>');  
  88.        }  
  89.      </script>  
  90.    </div>  
  91.  </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_186.html