純css怎么實現(xiàn)tooltip

小編給大家分享一下純css怎么實現(xiàn)tooltip，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)專注于武宣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。武宣網(wǎng)站建設(shè)公司,為武宣等地區(qū)提供建站服務(wù)。全流程按需策劃，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

效果

原始版

最簡單的莫過于就用原始title屬性，像這樣：

<button title="tips">button</button>

缺點是體驗是差了點，并且鼠標(biāo)移上去，過一會兒才響應(yīng)。

改進(jìn)版

于是改進(jìn)了下面這個版本

html部分

  <div class="btn">
    <span title="提示文本">鼠標(biāo)移動到這</span>
    <span class="tip">提示文本</span>
  </div>

css部分

.btn {
  width: 100px;
  position: relative;
  display: inline-block;
  background-color: gold;
  padding: 5px;
  cursor: pointer;
}

.btn .tip {
  display: none;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  font-size: 12px;

  /* 垂直居中 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 118px;
  z-index: 1;
}

.btn:hover .tip {
  display: block;
}

一開始設(shè)置tip是隱藏display: none;，當(dāng)鼠標(biāo)移上去，將tip樣式設(shè)置為display: block;來顯示。

終極版

其實改進(jìn)版一般用也夠了，但同事老爺們覺得不夠漂亮，逼格不高，沒有動畫。

無意間逛到百度云管理后臺頁面，發(fā)現(xiàn)了一排漂亮的tooltip，這不正是我需要的嗎？竊喜！于是研究一番，拿來即用。

html部分：

<button class="btn" tip="a bcdef">鼠標(biāo)移動到這</button>

css部分：

.btn {
      position: relative;

      display: block;
      margin: 100px auto;
      padding: 10px;
      font-size: 14px;
      background: #fff;
      color: green;
      border: 1px solid green;
      cursor: pointer;
    }
    [tip]:after {
      content: attr(tip);
      visibility: hidden;
      /* 實現(xiàn)垂直居中 */
      position: absolute;
      top: 50%;
      transform: translate(-5px, -50%);
      transition: all .3s;

      left: 100%;
      opacity: 0;

      /* 空白問題 */
      white-space: pre;
      font-size: 16px;
      padding: 5px 10px;
      background-color: rgba(18,26,44,0.8);
      color: #fff;
      box-shadow: 1px 1px 14px rgba(0,0,0,0.1)
    }
    [tip]:hover {
      /* ie兼容 */
      overflow: visible
    }
    .btn:hover:after {
      opacity: .8;
      transition: all .3s;
      transform: translate(5px, -50%);
      visibility: visible;
      display: block;
    }

首先，在標(biāo)簽中加上屬性tip，css樣式中用content: attr(tip);獲取屬性值。

默認(rèn)設(shè)置tip隱藏visibility: hidden;。

用transform: translate(-5px, -50%);實現(xiàn)居中和偏移效果。

動畫時間設(shè)置為0.3s:transition: all .3s;。

注意：white-space: pre;是為了考慮到tip中有可能帶有空格，那么也需要將空格顯示出來。

看完了這篇文章，相信你對“純css怎么實現(xiàn)tooltip”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱：純css怎么實現(xiàn)tooltip
網(wǎng)頁路徑：http://muchs.cn/article26/ijdijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站營銷、品牌網(wǎng)站制作、商城網(wǎng)站、App設(shè)計、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)