Tooltips

Tooltips 使用前要先設定 [data-tooltip] 並且指定其中一種方向,四種方向包含 .tooltip-top , .tooltip-right , .tooltip-left , .tooltip-bottom

請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
<span class="tooltip-top" data-tooltip="看到我了嗎?">請將滑鼠移動到這</span>
<span class="tooltip-right" data-tooltip="看到我了嗎?">請將滑鼠移動到這</span>
<span class="tooltip-left" data-tooltip="看到我了嗎?">請將滑鼠移動到這</span>
<span class="tooltip-bottom" data-tooltip="看到我了嗎?">請將滑鼠移動到這</span>

多行顯示

有時提示內容或許過多的情況下,可另外加上 .tooltip-multiline

請將滑鼠移動到這
<span class="tooltip-top tooltip-rows" data-tooltip="~略~">請將滑鼠移動到這</span>

設定顏色

Tooltips 可透過 .color-* 來設定顏色。

請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
請將滑鼠移動到這
<span class="tooltip-top color-primary" data-tooltip="~略~">請將滑鼠移動到這</span>
<span class="tooltip-top color-secondary" data-tooltip="~略~">請將滑鼠移動到這</span>
<span class="tooltip-top color-focus" data-tooltip="~略~">請將滑鼠移動到這</span>
<span class="tooltip-top color-common" data-tooltip="~略~">請將滑鼠移動到這</span>
<span class="tooltip-top color-success" data-tooltip="~略~">請將滑鼠移動到這</span>
<span class="tooltip-top color-warning" data-tooltip="~略~">請將滑鼠移動到這</span>
<span class="tooltip-top color-error" data-tooltip="~略~">請將滑鼠移動到這</span>