Let's Write

Posted on Oct 3, 2022 • Edited on Dec 5, 2023 • Originally published at letswrite.tw

用 JavaScript 做一個 Tooltips 功能

#javascript #opensource #html #css

本篇要解決的問題

之前需要用到 Tooltips 的設計時，會直接在 CSS Portal 上生成一個，優點就是純 CSS 就能解決。不過總會遇到意外，對，就是發現只靠 CSS 是解決不了的時候，這時就得呼叫野心是統治全宇宙的 JavaScript 了。

本篇是 August 自己寫了一個 Tooltips 的功能，預備著以後專案需要使用時直接下載下來引用，像是一篇使用的說明檔。

要特別說明的是，目前這版不算是完整的開發完，因為 Tooltips 只寫了呈現在右邊，而不像一般的可以自由選擇呈現在上下左右的任一邊。

用寫套件的方式去開發時，會遇到一些眉眉角角，解決時覺得蠻有趣的，大家有興趣也可以自行開發個套件來玩，寫完後確實是會進步。

下載、引用 JS

因為 August 習慣用 ES6 的 import 來引用套件，所以自行開發 Tooltips 也是用 export 的寫法在寫。

先在 GitHub 上下載需要的 JS 檔：Let's Write Tooltips JS。

在自己的 JS 檔上直接 import 引用：

import { letswriteTooltips } from 'path/letswrite-tooltip.mjs';

這樣就安裝完成了。

原本一開始有考慮研究一下怎麼放進 npm 裡的，但這個功能還沒完整寫完，就等寫完的那一天再來研究吧，喵~

基本使用

import 後，要使用很簡單，程式碼的說明如下。

HTML

在要使用 Tooltips 的東西上加入 .letswrite-tooltips，另外再加上 data-content="要顯示的文字" 即可，如下：

<button type="button"
  class="letswrite-tooltips"
  data-content="Tooltips 內容"></button>

JS 預設會去抓頁面上的每一個 .letswrite-tooltips 去生成 Tooltips，顯示的文字就是 data-content 的內容。

JavaScript

如果只使用預設樣式（黑底白字），執行 Tooltips 的 script 就一行：

const tooltip = new letswriteTooltips();

預設的樣式就是這樣：

padding: 4px 8px;
background-color: #212121;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 4px;
font-size: 16px;
color: rgba(255, 255, 255, .8);

參數說明

可以用的參數總共有 4 個，全部都是選填：

new letswriteTooltips({
  el: '.letswrite-tooltips',
  dataContent: 'content',
  customClass: 'letswrite-tooltips-default',
  callback: function() {}
})

el：哪一個 class name 要執行 Tooltips？預設是 .letswrite-tooltips。
dataContent：Tooltips 的內文要抓哪一個 data-*，預設是 content，意思就是會去抓 data-content。
customClass：需要加上客製的 class 時可以填，有多個就用空格分開。預設是 letswrite-tooltips-default。
callback：點擊 Tooltips 的 callback，預設是 function() {}，就是不做任何事。

客製樣式

想要客製樣式就是填寫 customClass，下面示範改成白底黑字。

<style>
.custom-demo {
  padding: .25rem;
  background-color: white;
  border: 1px solid #a1a1a1;
  border-radius: .25rem;
  color: #a1a1a1;
}
</style>

<button type="button"
  class="letswrite-tooltips-for-custom"
  data-content="Tooltips 內容"></button>

<script>
  const tooltip = new letswriteTooltips({
    el: '.letswrite-tooltips-for-custom',
    customClass: 'custom-demo'
  });
</script>

點擊後執行 function

比方我們在一個 button 上加了 .letswrite-tooltip，點擊這個按鈕要觸發的 function，可以直接在 button 上寫 addEventListener，也可以直接用套件裡的 callback。

<button type="button"
  class="letswrite-tooltips"
  data-content="Tooltips 內容"></button>

<script>
  const tooltip = new letswriteTooltips({
    callback: (e) => {
      e.preventDefault();
      console.log('callback');
    }
  });
</script>