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/