當您想要在您的應用程式中針對特定區域提供使用者更多資訊時,可以使用 QTooltip 元件。當滑鼠游標停留在目標元素上方(或在行動平台上短暫觸碰並按住)時,工具提示將會出現。
用法
QTooltip 的概念是將其放置在您希望作為觸發器的 DOM 元素/元件內,作為直接子元素。不必擔心 QTooltip 內容會繼承容器的 CSS,因為 QTooltip 將通過 Quasar Portal 作為 <body>
的直接子元素注入。
警告
如果您想要有條件地啟用或停用 QTooltip,請在其上使用 v-if
而不是 v-show
。
自訂
過場效果
在下面的範例中,展示了一些過場效果。如需完整的可用過場效果列表,請前往過場效果。
可重複使用
下面的範例示範如何建立可重複使用的選單,該選單可以與不同的目標共享。
定位
QTooltip 的位置可以自訂。它會考慮 anchor
和 self
可選屬性。QTooltip 彈出視窗的最終位置經過計算,使其顯示在可用的螢幕空間中,必要時切換到右側和/或頂側。
對於水平定位,當您想要自動考慮是否為 RTL 或非 RTL 時,可以使用 start
和 end
。start
和 end
對於非 RTL 意味著“左”,對於 RTL 意味著“右”。
錨點原點
垂直
頂部
置中
底部
水平
左
中間
右
開始
結束
自身原點
垂直
頂部
置中
底部
水平
左
中間
右
開始
結束
<q-tooltip anchor="bottom middle" self="top middle">
Here I am!
</q-tooltip>
content_paste