Skip to main content
Version: 1.x

Tooltips

ID: vTooltips | Type: Plugin

This plugin manages tooltips.

info

This plugin has a Registry containing all registered tooltips.

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

Setup#

import { Player, Tooltips } from '@vime-js/complete';
// ...
const player = new Player({
target,
props: {
plugins: [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';
info

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.

Edit this page