iView‐Tooltip - daniel-qa/Vue GitHub Wiki

tooltip, 不在 slot 的內容，會顯示在外面

<Tooltip>
  <!-- 這裡是觸發 Tooltip 的區塊，也就是“實際會看到的內容” -->
  <span class="product-name">HiTeach 配額授權管理</span>

  <!-- 這裡才是 Tooltip 彈出來的內容 -->
  <div slot="content">
     我是 Tooltip 的內容
  </div>
</Tooltip>

Vue 渲染這個元件時，會把 < span class="product-name">... 放在 DOM 中，

而 < div slot="content"> 是 Tooltip 彈出的內容，預設隱藏，只有觸發時才顯示。

  • transferClassName="tooltip-quota-overview"

transferClassName 是指 浮層（tooltip/popover）被傳送到 document.body 時，額外加上的 class 名稱。

transfer：代表這個 tooltip 不會渲染在原本的父層，而是 動態掛到 document.body（避免被父層的 overflow:hidden、z-index 等影響）。

transferClassName="tooltip-quota-overview"：讓這個被「傳送」出去的浮層，有一個可以客製化樣式的 class。

  • 建議：Tooltip max-width 應略大或等於 solot 的 max-width
Tooltip max-width = 外殼最大寬度上限

slot-content 寬度 = 彈性寬度，受 min/max 限制

組件會讓內容在這兩個限制之間自動排版，不會截掉文字

:transfer="true"

  • 觀念解釋

這是 View UI（原 iView）中的 Tooltip 等彈出元件 提供的一個屬性，用來控制 是否將該元件的內容渲染到 < body> 外層。

  • 中文解釋：

transfer（傳送）：字面意思是「把內容傳送走」。

:transfer="true" 的意思是：

將這個 Tooltip 元件的 DOM 節點，從原來的父層 DOM 結構中「搬出來」，掛到整個頁面的 下方。

這樣就可以避開父層設定的 overflow: hidden、position: relative 等限制，讓 Tooltip 不會被遮或切斷。

transferClassName

transferClassName="tooltip-custom" 是 給 transfer 後的 Tooltip 彈出層加一個自訂 CSS class。

當你使用 transfer 時，Tooltip 元素會被移到 body 下，不再是原本 DOM 的子元素

如果你想 改變彈出層的樣式（寬度、顏色、陰影、字體…），就不能直接改原本父元素的 CSS

這時候 transferClassName 就派上用場了：

它會把你指定的 class (tooltip-custom) 加到真正生成在 body 下的 Tooltip DOM 上

你就可以針對這個 class 寫 CSS，自由調整樣式

  • 範例
/* 自訂彈出層樣式 */
.tooltip-custom {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
}
⚠️ **GitHub.com Fallback** ⚠️