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.

Display Placement

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

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-tooltip for better customization.

Updated in v2.2.0

.md-tooltip {
  --md-tooltip-arrow-size: #{vars.$tooltip-arrow-size};
  --md-tooltip-border-radius: #{vars.$tooltip-border-radius};
  --md-tooltip-bg: #{vars.$tooltip-bg};
  --md-tooltip-color: #{vars.$tooltip-color};
  --md-tooltip-opacity: #{vars.$tooltip-opacity};
  --md-tooltip-font-size: #{vars.$tooltip-font-size};
  --md-tooltip-padding-x: #{vars.$tooltip-padding-x};
  --md-tooltip-padding-y: #{vars.$tooltip-padding-y};
}

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