vime-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

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

Properties

PropertyAttributeDescriptionTypeDefault
activeactiveWhether the tooltip is visible or not.booleanfalse
directiondirectionDetermines if the tooltip should grow according to its contents to the left/right. By default content grows outwards from the center."left" ∣ "right" ∣ undefinedundefined
hiddenhiddenWhether the tooltip is displayed or not.booleanfalse
positionpositionDetermines 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-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

Graph

graph TD;
vime-caption-control --> vime-tooltip
vime-fullscreen-control --> vime-tooltip
vime-mute-control --> vime-tooltip
vime-pip-control --> vime-tooltip
vime-playback-control --> vime-tooltip
vime-scrubber-control --> vime-tooltip
vime-settings-control --> vime-tooltip
style vime-tooltip fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS