卡卡網(wǎng)

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

demodownload

實例介紹

當鼠標移到幫助按鈕上時，彈出文本提示框，效果是從小變大的動畫顯示。

實現(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">幫助提示標題</h3>
        <p class="help-tip__text">幫助提示文本文字在這里。</p>
      </div>
   </div>
</div>

解釋：

最外層的div，class="input-container"，是元素位置定義，與tool-tip效果無關。

第二個div，id="name-tooltip"，這個div里顯示一個幫助圖標。

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

CSS代碼

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

.help-tip::before { /*問號*/
  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 { /*防止鼠標從問題標志向下移動到內(nèi)容時隱藏幫助提示*/
  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;
  }
  
}

解釋：

請看代碼注釋。

這里說一下，transform: scale(1); 是實現(xiàn)動畫效果，scale() 是CSS3的一個縮放轉(zhuǎn)換屬性，此文《CSS3 transform: scale() 縮放轉(zhuǎn)換》有詳細示例分析。

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

總結(jié)

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

相關文章

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

標簽: Tooltips  工具提示