響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第三階段】Bootstrap協助專案設計

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="" 
   data-original-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;
}