3-12. Tooltips 工具提示的設計

參考： Bootstrap(中) 、 w3schools(英) 、 RUNOOB(中)

Tooltips工具提示的設計：簡潔版

<a href="https://www.parmigiani.com/en/watches/tonda" target="_blank" 
   data-toggle="tooltip" 
   title="世界最薄的微型擺陀超薄浮動陀飛輪機芯與世界最輕的鈦金屬陀飛輪框架兩項殊榮。">
Tonda</a>

<script>
  $('[data-toggle="tooltip"]').tooltip();
</script>

Tooltips工具提示的設計：進階版

<a href="https://www.parmigiani.com/en/watches/tonda" target="_blank" 
   data-toggle="tooltip" 
   data-placement="bottom" 
   data-trigger="hover focus"
   data-html="true" 
   title="<h2>Parmigiani</h2><h4>瑞士奢侈品牌的手錶製造商</h4><h4>新聞訊息來自:watch-critics</h4>">
帕瑪強尼</a>

如何修改Tooltips的CSS樣式

.tooltip-inner { background-color: #ffff74; }
.tooltip-inner h2 { background-color: blue; font-size: 20px; }
.tooltip-inner h4 { color: blue; font-size: 14px; }
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
.bs-tooltip-bottom .arrow::before { border-bottom-color: #ffff74; }
.bs-tooltip-auto[x-placement^=top] .arrow::before, 
.bs-tooltip-top .arrow::before { border-top-color: #ffff74; }