Tooltips

ID: vTooltips | Type: Plugin

This plugin manages tooltips.

This plugin has a Registry containing all registered tooltips.

const unsubscribe = player.getRegistry().subscribe(records => {
const tooltips = records.vTooltips;
});
// ...
unsubscribe();

Setup

Basic
Manager
Basic
import { Player, Tooltips } from '@vime-js/complete';
// ...
const player = new Player({
target,
props: {
plugins: [Tooltips]
}
});
Manager
import { Player, Tooltips } from '@vime-js/complete';
// ...
player
.getPluginsManager()
.addPlugin(Tooltips)
.then((tooltips) => {
// ...
});

Usage

Create Tooltip

// The target must be inside the element we want to add a tooltip for.
const target = document.getElementById('tooltip-target');
const tooltip = player.vTooltips.createTooltip('myTooltip', target);
tooltip.title = 'Content inside tooltip';

See Tooltip for the full API.

Update Tooltip

const tooltip = player.vTooltips.getTooltip('myTooltip');
tooltip.showHint = false;

Remove Tooltip

player.vTooltips.removeTooltip('myTooltip');

Access Tooltip via Event

player.vTooltips.$on('register', registration => {
const { id, value: tooltip } = registration;
if (id === 'myTooltip') {
// ...
}
});

Access Tooltip via Registry

player.vTooltips.getRegistry().subscribe(tooltips => {
const tooltip = tooltips.myTooltip;
if (tooltip) {
// ...
}
});

Props

autopilot

Type: boolean | Default: true

In autopilot mode the plugin will control certain properties automatically. Set this to false if you'd like to control them yourself. Properties below contain an 'Auto' descriptor if they are part of this system.

isEnabled

Type: boolean | Default: true | Auto: true

Whether to render all tooltips in the DOM or not.

showHints

Type: boolean | Default: true

Whether to show or hide hint texts on all registered tooltips.

Methods

getRegistry

Return Type: Registry

The plugin registry where Tooltip instances are registered.

getTooltips

Return Type: Tooltip[]

All registered Tooltip instances.

getTooltip

Parameters: (id: string) | Return Type: Tooltip|undefined

The Tooltip instance for the given id.

createTooltip

Parameters: (id: string, target: HTMLElement) | Return Type: Tooltip

Creates a Tooltip instance, mounts it on the given target, registers it under the given id and returns the instance.

removeTooltip

Parameters: (id: string)

Destroys the Tooltip instance associated with the given id and deregisters it.

getTooltipComponent

Return Type: TooltipConstructor

The Tooltip component constructor.