当用户将鼠标悬停在元素上时,v-tooltip
组件可用于传递信息。 您还可以通过 v-model
以编程方式控制工具提示的显示。 激活后,工具提示将显示标识元素的文本标签,例如其功能说明。
为了正确定位 v-tooltip
,需要一个位置支撑 ( top
| bottom
| left
| right
)
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
给组件应用 position: absolute
当未使用 activator
插槽时,指定自定义激活器。String 可以是任何有效的 querySelector,对象可以是任何有效的 Node。
移除内容的溢出重新定位
指定此组件应该与哪个 DOM 元素分离。to.String 可以是任何有效的 querySelector,对象可以是任何有效的 Node。这将默认挂载到根节点 v-app
。
将组件向底部对齐。
当(open-on-hover)属性设置为true时,会在菜单关闭之后延时(以毫秒为单位)
将指定的颜色应用于控件 - 它可以是 material color 的名称(例如 success
或者 purple
)或 css 颜色 (#033
或 rgba(255, 0, 0, 0.5)
)。 你可以在 colors page 中找到内置类的列表。
将自定义类应用于分离的元素。这很有用,因为内容被移动到 v-app
组件的开头(除非提供了 attach 属性),并且不被直接作为目标传递到组件上的类。
禁用提示
将强制组件内容在加载时呈现。如果存在内容的话,则不会在 DOM 中渲染,如果你想优化 SEO,这是非常有用的。
给组件应用 position: fixed
指定是否使用内部激活器
将组件向左边对齐。
设置内容的最大宽度
设置内容的最小宽度
向底部微调内容
向左侧微调内容
向右侧微调内容
向顶部微调内容
微调内容宽度
当由于溢出而重新定位时,导致组件翻转到另一侧
打开工具提示后的延迟时间(以毫秒为单位)(open-on-hover
属性设置为 true 时)
指定是否应在激活器单击时打开工具提示
指定是否在激活器悬停时打开工具提示
用于在不使用激活器插槽时定位内容
用于在不使用激活器插槽时定位内容
将组件向右边对齐。
指定激活程序包装的自定义标签
将组件向顶部对齐。
控制组件可见还是隐藏。
用于组件的 z-index
使用时,将在点击后激活组件(或悬停特定组件),它手动阻止事件传播。如果通过模型打开组件而没有此插槽,则需要手动阻止事件传播。
{
on: { [eventName]: eventHandler }
value: boolean
}
默认Vue 插槽。
rgba(map-get($grey, 'darken-2'), 0.9) !default;
$border-radius-root !default;
14px !default;
5px 16px !default;
map-get($shades, 'white') !default;
150ms !default;
75ms !default;
map-get($transition, 'linear-out-slow-in') !default;