用 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';

這樣就安裝完成了。

原本一開始有考慮研究一下怎麼放進 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>

Demo 及原始碼

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

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

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

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

Summary
用 JavaScript 做一個 Tooltips 功能
Article Name
用 JavaScript 做一個 Tooltips 功能
Description
本篇大綱:本篇要解決的問題。下載、引用 JS。基本使用。參數說明。客製樣式。點擊後執行 function。Demo 及原始碼。本篇是 August 自己寫了一個 Tooltips 的功能,預備著以後專案需要使用時直接下載下來引用,像是一篇使用的說明檔。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

Let's Write

前端工程師 August 的學習筆記 — solving problems, in simple ways.

Follow us Telegram GitHub