卡卡網(wǎng)

工具提示(tool-tip)也稱為信息提示，在圖形用戶界面(GUI) 中比較常見(jiàn)。當(dāng)將鼠標(biāo)懸停在某元素上時(shí)，文本框會(huì)彈出，并顯示有關(guān)該元素的信息。tool-tip的實(shí)現(xiàn)方法有很多，比如可以用成熟的套件如Bootstrap來(lái)完成，也可以自編JS程序來(lái)實(shí)現(xiàn)，不過(guò)本文要介紹的是，用純CSS來(lái)實(shí)現(xiàn)，方法很簡(jiǎn)單，代碼量不多，而效果卻很不錯(cuò)。

demodownload

實(shí)例介紹

當(dāng)鼠標(biāo)移到幫助按鈕上時(shí)，彈出文本提示框，效果是從小變大的動(dòng)畫(huà)顯示。

實(shí)現(xiàn)方法是純CSS。

HTML代碼

<div class="input-container">
   <div class="help-tip" role="tooltip" id="name-tooltip">
      <div class="help-tip__content">
        <h3 class="help-tip__title">幫助提示標(biāo)題</h3>
        <p class="help-tip__text">幫助提示文本文字在這里。</p>
      </div>
   </div>
</div>

解釋?zhuān)?/strong>

最外層的div，class="input-container"，是元素位置定義，與tool-tip效果無(wú)關(guān)。

第二個(gè)div，id="name-tooltip"，這個(gè)div里顯示一個(gè)幫助圖標(biāo)。

第三個(gè)div，class="help-tip__content"，這個(gè)div是提示文本框。

CSS代碼

/*-------------
Help-tip Style
---------------*/
.help-tip {
  position: absolute;
  top: -.2em; right: 1.1em;
  //border: 1px solid red;
}

.help-tip::before { /*問(wèn)號(hào)*/
  content: "?";
  position: absolute;
  top: 0; right: 0;
  font-size: 1.2em;
  padding: .1em .6em;
  border-radius: 50%;
  font-weight: bold;
  cursor: help; 
  background: #1565c0;
  color: #f9f9f9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.help-tip__content {
  position: absolute;
  top: 2.75em; right: -.2em;
  min-width: 15em;
  padding: .5em 1em;
  background: rgba(31, 35, 39, 0.9);
  color: #f9f9f9;
  border-radius: .2em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  z-index: 2;
  transform-origin: 95% -1%;
  transform: scale(0);
  transition: transform .2s ease;
}

.help-tip__content::before { /*help-tip的箭頭指向*/
  content: "";
  position: absolute;
  top: -1.35em; right: .6em; 
  border: .7em solid transparent;
  border-bottom-color: rgba(31, 35, 39, 0.9);
}

.help-tip__content::after { /*防止鼠標(biāo)從問(wèn)題標(biāo)志向下移動(dòng)到內(nèi)容時(shí)隱藏幫助提示*/
  content: "";
  position: absolute;
  width: 60%;
  min-height: 2em;
  top: -2em; right: 0;
  //background: red;
}

.help-tip:hover .help-tip__content,
.help-tip:focus .help-tip__content{
  transform: scale(1);
}


@supports(filter: drop-shadow(0 0 0 #ccc)) { /*支持 filter: drop-shadow 的瀏覽器, 增加它并刪除 box-shadow*/
  
  .help-tip__content {
    box-shadow: none;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
  }
  
}

@supports(display: flex) { /*支持 display: flex 的瀏覽器*/
  
  .help-tip__content {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
  }
  
}

解釋?zhuān)?/strong>

請(qǐng)看代碼注釋。

這里說(shuō)一下，transform: scale(1); 是實(shí)現(xiàn)動(dòng)畫(huà)效果，scale() 是CSS3的一個(gè)縮放轉(zhuǎn)換屬性，此文《CSS3 transform: scale() 縮放轉(zhuǎn)換》有詳細(xì)示例分析。

drop-shadow() 是提示文本框的陰影樣式設(shè)置，參考《使用box-shadow實(shí)現(xiàn)的7個(gè)按鈕懸停效果》。

總結(jié)

本文介紹了純CSS實(shí)現(xiàn)的tool-tip（幫助提示）動(dòng)畫(huà)顯示效果，代碼比較簡(jiǎn)單，遷移使用方便，效果卻很不錯(cuò)，值得收藏使用。

相關(guān)文章

• 純CSS實(shí)現(xiàn)：箭頭+圓角方形提示框tooltip
• 純CSS對(duì)話框/對(duì)話氣泡/語(yǔ)音泡沫/speech bubbles【27個(gè)示例】
• CSS3+jQuery輕松實(shí)現(xiàn)工具提示(Tooltips)
• 純CSS3工具提示(Tooltips)【實(shí)例演示/源碼下載】