Version: 5.x

vm-tooltip

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.

Visual#

Vime tooltip component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-controls>
<vm-control>
<vm-tooltip>Title</vm-tooltip>
</vm-control>
</vm-controls>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
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'

Slots#

SlotDescription
Used to pass in the contents of the tooltip.

CSS Custom Properties#

NameDescription
--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.

Dependencies#

Used by#