Tooltip

BsTooltip is a component which is useful for conveying information when user hovers over an element.

Overview

BsTooltip component can be wrapped on almost any component or html element.

This text has a tooltip

Display Placement

A tooltip can be aligned to any of the four sides of the activator element.

CSS Variables

Added since v2.0.0

--md-tooltip-arrow-width: 0.8rem;
--md-tooltip-arrow-height: 0.4rem;
--md-tooltip-border-radius: 0.375rem;
--md-tooltip-bg: #000;
--md-tooltip-color: #fff;
--md-tooltip-opacity: 0.9;
--md-tooltip-font-size: 13px;

API Reference

Property	Type	Default	Description
activator	String/Element		Html element ID or Element instance that can trigger the appearance of this tooltip. v2.0.15
arrow-off	Boolean	false	Hide this tooltip arrow. v2.0.15
content required	string		The tooltip content.
disabled	Boolean	false	Disable this tooltip and prevent it from appearing.
max-width	Number		This tooltip maximum display width in pixel.
placement	String	'bottom'	This tooltip display placement. Valid values are: left, right, top, bottom.
show	Boolean	false	Value monitored by v-model to show or hide this tooltip programmatically. v2.0.0
width	Number		This tooltip display width in pixel.
z-index	Number	2000	Inline-css z-index positioning. v2.0.0