15 - customize tooltips with data attribute

雖然這次想介紹的東西偏向後端為主，不過畢竟寫 ROR 除非前後端完全分離，不然多少還是會碰到前端一些，想到 tooltips 基本上是每個網站多多少少會有的功能，但如果是用 bootstrap 或者其他的套件可能就會踩到 Turbolinks 的雷，又或者是還要載入 Enable tooltips everywhere，所以與其用別人寫好的還要套來套去，不如直接手刻一個讓整個網站都能使用吧！

data-* attribute

data-全域屬性構成一組稱作自訂 data 屬性的屬性。它能令 HTML 與其 DOM 擁有給腳本用的交換資訊。這種屬性設置的自訂資料，能透過元素的 HTMLElement 介面而活用。HTMLElement.dataset property 允許訪問它們。 可以是任何遵循以下規則的 xml 名稱（取自 MDN data-*）：

• 名字絕對不能以 xml 起頭，無論是否用於 xml、
• 名字絕對不能包含分號（U+003A）、
• 名字絕對不能包含大寫 A 到大小 Z 的拉丁字母。

簡單來說 * 後的字串可自定義名稱，例如： data-item="1"、data-content="chester_tang"。

  <table>
    <!-- thead -->

    <tbody>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.name %></td>
          <td><%= user.email %></td>
          <td data-explain-tooltip="<%= user.country.alpha_2_code %>"><%= user.tel %></td>
          <td><%= link_to 'Show', user %></td>
          <td><%= link_to 'Edit', edit_user_path(user) %></td>
          <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

Settings app > assets > stylesheets > explain_tooltip.scss

設定 ::after 偽元素來將自訂的資料傳入 scss 內顯示在 content 中，並在 hover 到加入延遲、visible，其餘就只是單純的簡易 style 設定，是不是簡單又方便啊...

  [data-explain-tooltip] {
    position: relative;
  }

  [data-explain-tooltip]::after {
    content: attr(data-explain-tooltip);
    font-size: 10px;
    color: #777;
    white-space: nowrap;

    position: absolute;
    left: 0;
    visibility: hidden;
    z-index: 10;
    bottom: 100%;

    border-width: 1px;
    border-color: #fa0;
    border-radius: 0.25rem;
    background-color: red;
    padding: .25rem .5rem;
  }

  [data-explain-tooltip]:hover::after {
    visibility: visible;
    transition-delay: 300ms;
  }

參考來源

• Turbolinks 坑
• MDN data-*

My blog

• https://chestertang.tw/