Skip to main content
Version: 5.x


A small pop-up box that appears when a user moves their mouse over an element. Their main purpose is to provide a description about the function of that element.


Vime tooltip component


<!-- ... -->
<!-- ... -->


activeWhether the tooltip is visible or not.booleanfalse
directionDetermines if the tooltip should grow according to its contents to the left/right. By default content grows outwards from the center."left" ∣ "right" ∣ undefinedundefined
hiddenWhether the tooltip is displayed or not.booleanfalse
positionDetermines if the tooltip appears on top/bottom of it's parent."bottom" ∣ "top"'top'


Used to pass in the contents of the tooltip.

CSS Custom Properties#

--vm-tooltip-bgThe background color of the tooltip.
--vm-tooltip-border-radiusThe border radius of the tooltip.
--vm-tooltip-box-shadowThe box shadow cast around the tooltip.
--vm-tooltip-colorThe text color of the tooltip.
--vm-tooltip-fade-durationThe length in seconds that the tooltip will take to fade in/out.
--vm-tooltip-fade-timing-funcThe transition timing function for fading in and out.
--vm-tooltip-font-sizeThe font size of the tooltip text.
--vm-tooltip-leftThe left offset of the tooltip.
--vm-tooltip-paddingThe padding inside the tooltip.
--vm-tooltip-spacingThe space between the tooltip and its parent when active.
--vm-tooltip-z-indexThe position in the UI z-axis stack inside the player.


Used by#