<divclass="text-center my-3"><b-buttonv-b-tooltip.hovertitle="Tooltip directive content">
Hover Me
</b-button><b-buttonid="tooltip-target-1">
Hover Me
</b-button><b-tooltiptarget="tooltip-target-1"triggers="hover">
I am tooltip <b>component</b> content!
</b-tooltip></div>
<b-buttonhref="#"tabindex="0"v-b-tooltip.focustitle="Tooltip title"
>
Link button with tooltip directive
</b-button><b-buttonid="link-button"href="#"tabindex="0">
Link button with tooltip component
</b-button><b-tooltiptarget="link-button"title="Tooltip title"triggers="focus">
Tooltip title
</b-tooltip>
<b-containerfluid><b-row><b-colmd="4"class="py-4"><b-buttonid="button-1"variant="outline-success">Live chat</b-button></b-col><b-colmd="4"class="py-4"><b-buttonid="button-2"variant="outline-success">Html chat</b-button></b-col><b-colmd="4"class="py-4"><b-buttonref="button-3"variant="outline-success">Alternative chat</b-button></b-col></b-row><!-- Tooltip title specified via prop title --><b-tooltiptarget="button-1"title="Online!"></b-tooltip><!-- HTML title specified via default slot --><b-tooltiptarget="button-2"placement="bottom">
Hello <strong>World!</strong></b-tooltip><!-- Tooltip for an element identified by ref --><b-tooltip:target="() => $refs['button-3']"title="Alternative!"></b-tooltip></b-container>
<divclass="text-center"><div><b-buttonid="tooltip-button-interactive">My tooltip is interactive</b-button><b-tooltiptarget="tooltip-button-interactive">I will stay open when hovered</b-tooltip></div><divclass="mt-3"><b-buttonid="tooltip-button-not-interactive">Mine is not...</b-button><b-tooltiptarget="tooltip-button-not-interactive"noninteractive>Catch me if you can!</b-tooltip></div></div>
Bootstrap default theme variants are: danger, warning, success, primary, secondary, info, light, and dark. You can change or add additional variants via Bootstrap SCSS variables
A custom class can be applied to the tooltip outer wrapper <div> by using the custom-class prop:
To open a specific tooltip, pass the trigger element's id, or the id of the tooltip (if one
was provided via the id prop), as the argument when emitting the bv::show::tooltip $root event:
To enable a specific tooltip, pass the trigger element's id, or the id of the tooltip (if
one was provided via the id prop), as the argument when emitting the bv::enable::tooltip $root
event:
String or HTMLElement or SVGElement or Function or Object
Element string ID, or a reference to an element or component, that you want to trigger the tooltip.
triggers
String or Array
'hover focus'
Specify which triggers will show the tooltip. Supported values are 'click', 'hover', 'focus'. Refer to the docs for special triggers 'blur' and 'manual'
placement
String
'top'
Placement of the tooltip: One of 'top', 'bottom', 'right', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'
fallback-placement
String or Array
'flip'
placement to use when the tooltip would be out of boundaries. Refer to the docs for more details
variant
String
Applies one of the Bootstrap theme color variants to the component
custom-class
String
CSS class (or classes) to apply to the tooltip's root element
delay
Number or Object or String
50
Value for the show and hide delay. Applies to both show and hide when specified as a number or string. Use object form to set show and hide delays individually
boundary
String or HTMLElement or Object
'scrollParent'
The boundary constraint of the tooltip: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement or component
boundary-padding
Number or String
5
The tooltip will try and stay away from the edge of the boundary element by the number of pixels specificed
offset
Number or String
0
Offset (in pixels) for the arrow center compared to the trigger target element
no-fade
Boolean
false
When set to 'true', disables the fade animation/transition on the component
container
String or HTMLElement or Object
The container element to append the rendered tooltip when visible. Default's to the body element
show
Boolean
false
When set will show the tooltip
noninteractivev2.2.0+
Boolean
false
Wether the tooltip should not be user-interactive
disabled
Boolean
false
设置为“true”时,禁用组件的功能并将其置于禁用状态
id
String
用于在渲染的内容上设置“id”属性,并用作根据需要生成任何其他元素ID的基础
插槽
插槽名称
描述
default
Slot for tooltip content (HTML/components supported)
事件列表
事件
参数
描述
show
bvEvent - bvEvent object. Cancelable.
Emitted when tooltip is about to be shown. Cancelable. Call bvEvent.preventDefault() to cancel show.
shown
bvEvent - bvEvent object.
Emitted when tooltip is shown
hide
bvEvent - bvEvent object. Cancelable.
Emitted when tooltip is about to be hidden. Cancelable. Call bvEvent.preventDefault() to cancel hide.
hidden
bvEvent - bvEvent object.
Emitted when tooltip is hidden
enabled
bvEvent - bvEvent object
Emitted when tooltip becomes enabled
disabled
bvEvent - bvEvent object
Emitted when tooltip becomes disabled
bv::tooltip::show
bvEvent - bvEvent object. Cancelable.
Emitted on $root when tooltip is about to be shown. Cancelable. Call bvEvent.preventDefault() to cancel show.
bv::tooltip::shown
bvEvent - bvEvent object.
Emitted on $root when tooltip is shown
bv::tooltip::hide
bvEvent - bvEvent object. Cancelable.
Emitted on $root when tooltip is about to be hidden. Cancelable. Call bvEvent.preventDefault() to cancel hide.
bv::tooltip::hidden
bvEvent - bvEvent object.
Emitted on $root when tooltip is hidden
bv::tooltip::enabled
bvEvent - bvEvent object.
Emitted on $root when tooltip becomes enabled
bv::tooltip::disabled
bvEvent - bvEvent object.
Emitted on $root when tooltip becomes disabled
$root事件监听器
控制 <b-tooltip> 可以通过
在 $root上发出以下事件:
事件
参数
描述
bv::hide::tooltip
id - (optional), tooltip id to hide
Close (hide) all or a specific open tooltip when this event is emitted on $root
bv::show::tooltip
id - (optional), tooltip id to show
Open (show) all or a specific tooltip when this event is emitted on $root
bv::disable::tooltip
id - (optional), tooltip id to disable
Disable all or a specific tooltip when this event is emitted on $root
bv::enable::tooltip
id - (optional), tooltip id to enable
Enable all or a specific tooltip when this event is emitted on $root