用 JavaScript 做一個 툴팁 功能

本篇要解決的問題

之前需要用到 툴팁 的設計時,會直接에서 CSS Portal上生成一個,優點就是純 CSS 就能解決.不過總會遇到意外,對,就是發現只靠 CSS 是解決不了的時候,這時就得呼叫野心是統治叙.

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

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

用寫套件的方式去開發時,會遇到一些眉眉角角,解決時覺得蠻有趣的,大家有興趣也可以自行開發個套件澆玩,寫完後瘭堀.

下載、引用 JS

8월 習慣用 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的內容.

자바스크립트

如果只使用預設樣式(黑底白字),執行 툴팁 的 스크립트 就一行:

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 :哪一個 클래스 이름 要執行 툴팁? 預設是 .letswrite-tooltips .

dataContent :툴팁 的內文要抓哪一個 data-* ,預設是 content ,意思就是會去抓 data-content .

customClass :需要加上客製的 class 時可以填,有多個就用空格分開.預設是 letswrite-tooltips-default .

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>

點擊後執行 기능

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

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

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

데모 及原始碼

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

데모: https://letswritetw.github.io/letswrite-js-tooltips/

원본: https://github.com/letswritetw/letswrite-js-tooltips

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