---

引用

下載 JavaScript 的檔案：Let's Write Tooltips JS

引用方式：

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

---

Demo 1：基本使用，都吃預設值

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


<script>
  const demo1 = new letswriteTooltips();
</script>

hover 可看到

---

Demo 2：加入客製 class name

<button type="button"
  class="letswrite-tooltips-demo2"
  data-content="Tooltips 內容"></button>
<style>
  .letswrite-tooltips-custom {
    padding: .25rem;
    background-color: white;
    border: 1px solid #a1a1a1;
    border-radius: .25rem;
    color: #a1a1a1;
  }
</style>
<script>
  const demo2 = new letswriteTooltips({
    el: '.letswrite-tooltips-demo2',
    customClass: 'letswrite-tooltips-custom'
  });
</script>

hover 可看到

---

Demo 3：點擊後執行 function

<button type="button"
  class="letswrite-tooltips-demo3"
  data-content="Tooltips 內容"></button>
<script>
  const demo3 = new letswriteTooltips({
    el: '.letswrite-tooltips-demo3',
    callback: (e) => {
      e.preventDefault();
      alert('callback')
    }
  });
</script>

hover 可看到

---