卡卡網(wǎng)

在前文中介紹過《純CSS3工具提示(Tooltips)》,本文將繼續(xù)介紹CSS3+jQuery實(shí)現(xiàn)的工具提示(Tooltips)，本實(shí)例引用了jQuery文件，卻增強(qiáng)了提示框的顯示效果，添加了漸入的動(dòng)畫效果，在用戶體驗(yàn)上好過前文介紹的《純CSS3工具提示(Tooltips)》。

CSS3+jQuery輕松實(shí)現(xiàn)工具提示(Tooltips)

css代碼

ol {
  margin: 0;
  *margin-left: 20px;
  padding: 0;
  list-style: decimal-leading-zero inside;
}

ol li {
  margin: 20px 0;
}
    
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  white-space: nowrap;
  border-bottom: 1px dotted #777;
}
.tooltip-content {
  opacity: 0;
  visibility: hidden; 
  font: 12px Arial, Helvetica;
  text-align: center;
  border-color: #aaa #555 #555 #aaa;
  border-style: solid;
  border-width: 1px;
  width: 150px;
  padding: 15px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -76px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0)); 
  -moz-box-shadow: 1px 1px 0 #555,
    2px 2px 0 #555,
    3px 3px 1px rgba(0, 0, 0, .3),
    0  1px 0  rgba(255,255,255, .5) inset;
  -webkit-box-shadow: 1px 1px 0 #555,
    2px 2px 0 #555,
    3px 3px 1px rgba(0, 0, 0, .3),
    0  1px 0  rgba(255,255,255, .5) inset;
  box-shadow: 1px 1px 0 #555,
    2px 2px 0 #555,
    3px 3px 1px rgba(0, 0, 0, .3),
    0  1px 0  rgba(255,255,255, .5) inset; 
  -webkit-transition: bottom .2s ease, opacity .2s ease;
  -moz-transition: bottom .2s ease, opacity .2s ease;
  -ms-transition: bottom .2s ease, opacity .2s ease;
  -o-transition: bottom .2s ease, opacity .2s ease;
  transition: bottom .2s ease, opacity .2s ease; 
}
        
.tooltip-content:after,
.tooltip-content:before {
  border-right: 16px solid transparent;
  border-top: 15px solid #fff;
  bottom: -15px;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -10px;
}
    
.tooltip-content:before {
  border-right-width: 25px;
  border-top-color: #555;
  border-top-width: 15px;
  bottom: -15px;
}

.tooltip:hover .tooltip-content{
  opacity: 1;
  visibility: visible;
  bottom: 30px; 
}

Javascript代碼

先引用jQuery文件，推薦使用百度公共庫文件。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

編寫JS程序

$(document).ready(function(){
  $('[data-tooltip]').addClass('tooltip');
  $('.tooltip').each(function() {  
    $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');  
  });
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('.tooltip').mouseover(function(){
      $(this).children('.tooltip-content').css('visibility','visible');
    }).mouseout(function(){
      $(this).children('.tooltip-content').css('visibility','hidden');
    })
  }
});

html代碼

<ol>
  <li>
    <b data-tooltip="即時(shí)檢測網(wǎng)站在全國各地訪問<br>的有效性、響應(yīng)時(shí)間以及打開<br>速度。">網(wǎng)站速度測試</b>
  </li>
  <li>
    <font data-tooltip="為您找出影響網(wǎng)頁速度的因素，<br>從而加以優(yōu)化改善。">網(wǎng)站速度診斷</font>
  </li>
</ol>

execcodegetcode

使用說明

為需要使用工具提示(Tooltips)的文字添加一個(gè)font標(biāo)簽，此外也可以使用其他文字標(biāo)簽如i，span，b等。

在文字標(biāo)簽里添加data-tooltip屬性，其屬性值即是提示文字。特別說明一下，可以使用<br>來實(shí)現(xiàn)換行。

您可能對以下文章也感興趣

• 純CSS3工具提示(Tooltips)【實(shí)例演示/源碼下載】

標(biāo)簽: css  css3  Tooltips  工具提示