為何捐款
API 瀏覽器
工具提示

當您想要在您的應用程式中針對特定區域提供使用者更多資訊時,可以使用 QTooltip 元件。當滑鼠游標停留在目標元素上方(或在行動平台上短暫觸碰並按住)時,工具提示將會出現。

載入 QTooltip API...

用法

QTooltip 的概念是將其放置在您希望作為觸發器的 DOM 元素/元件內,作為直接子元素。不必擔心 QTooltip 內容會繼承容器的 CSS,因為 QTooltip 將通過 Quasar Portal 作為 <body> 的直接子元素注入。

基本



通過 v-model 切換



警告

如果您想要有條件地啟用或停用 QTooltip,請在其上使用 v-if 而不是 v-show

自訂

自訂



自訂延遲(1 秒)



帶偏移



過場效果

在下面的範例中,展示了一些過場效果。如需完整的可用過場效果列表,請前往過場效果

自訂過場效果



可重複使用

下面的範例示範如何建立可重複使用的選單,該選單可以與不同的目標共享。

使用目標



定位

QTooltip 的位置可以自訂。它會考慮 anchorself 可選屬性。QTooltip 彈出視窗的最終位置經過計算,使其顯示在可用的螢幕空間中,必要時切換到右側和/或頂側。

對於水平定位,當您想要自動考慮是否為 RTL 或非 RTL 時,可以使用 startendstartend 對於非 RTL 意味著“左”,對於 RTL 意味著“右”。


錨點原點
垂直
水平
自身原點
垂直
水平

<q-tooltip anchor="bottom middle" self="top middle">
  Here I am!
</q-tooltip>