# 工具提示/Tooltip 輕松創建一個漂亮的工具提示。 ## 用法 要應用這個組件，需要為某個元素添加 `data-uk-tooltip` 屬性。你還需要添加一個 title 屬性，它的值即是提示文本。 注意 使用此組件需要額外添加 `tooltip.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `tooltip.js` 文件，在`js/components`文件夾中。 ### Example  ### Markup ``` <button class="uk-button" data-uk-tooltip title="">...</button> <span data-uk-tooltip title="">...</span> ``` * * * ## 對齊 添加下列選項之一到 `data-uk-tooltip` 屬性中來調整提示組件的文本對齊方式。 | 屬性 | 描述 | 示例 | | --- | --- | --- | | `pos:'top'` | 將提示組件對齊到頂部。 |  | | `pos:'top-left'` | 將提示組件對齊到左上。 |  | | `pos:'top-right'` | 將提示組件對齊到右上。 |  | | `pos:'bottom'` | 將提示組件對齊到底部。 |  | | `pos:'bottom-left'` | 將提示組件對齊到左下。 |  | | `pos:'bottom-right'` | 將提示組件對齊到右下。 |  | | `pos:'left'` | 將提示組件對齊到左側。 |  | | `pos:'right'` | 將提示組件對齊到右側。 |  | ### Markup ``` <button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button> ``` * * * ## JavaScript 選項 這是一個如何通過屬性來設置選項的示例: ``` data-uk-tooltip="{pos:'bottom-left'}" ``` | 選項 | 可用的值 | 默認值 | 描述 | | --- | --- | --- | --- | | `offset` | integer | 5 | 與源元素之間的偏移量 | | `pos` | string | 'top' | 工具提示組件定位 | | `animation` | boolean | false | 工具提示的淡入動畫 | | `delay` | integer | 0 | 提示組件延遲顯示多少毫秒 | | `cls` | string | '' | 顯示提示時，添加的自定義class | | `activeClass` | string | 'uk-active' | 被撥動的選中類名/Toggled active class |