DEV Community 👩‍💻👨‍💻

Cover image for 用 JavaScript 做一個 Tooltips 功能
Let's Write
Let's Write

Posted on • Originally published at letswrite.tw

用 JavaScript 做一個 Tooltips 功能

本篇要解決的問題

之前需要用到 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';
Enter fullscreen mode Exit fullscreen mode

這樣就安裝完成了。

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


基本使用

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

HTML

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

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

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

JavaScript

如果只使用預設樣式(黑底白字),執行 Tooltips 的 script 就一行:

const tooltip = new letswriteTooltips();
Enter fullscreen mode Exit fullscreen mode

預設的樣式就是這樣:

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);
Enter fullscreen mode Exit fullscreen mode

參數說明

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

new letswriteTooltips({
  el: '.letswrite-tooltips',
  dataContent: 'content',
  customClass: 'letswrite-tooltips-default',
  callback: function() {}
})
Enter fullscreen mode Exit fullscreen mode
  • 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>

Enter fullscreen mode Exit fullscreen mode

點擊後執行 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>
Enter fullscreen mode Exit fullscreen mode

Demo 及原始碼

Demo 跟原始碼都放在 GitHub 上,歡迎自行取用,取用前麻煩分享本篇或在 GitHub 上按個星星,你的一個小小動作對本站都是大大的鼓勵。

Demo:https://letswritetw.github.io/letswrite-js-tooltips/

原始碼:https://github.com/letswritetw/letswrite-js-tooltips

未來會找時間再來把功能補得更齊全一些,敬請期待囉~

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post