Skip to main content

Tippy Themes and Theme Presets

To customise the functionality of Tippy.js a bit more, Deserted Chateau also uses its own themePresets to configure different behaviours for different types of tooltips.

Tippy Themes

There are a few themes Deserted Chateau defines, which can be found in the TooltipManager.js class.

Each Tippy.js theme can have multiple theme presets.

Deserted Chateau Tippy.js theme presets

Theme presets are defined in the TooltipManager.js class, and define the on-initialisation behaviour for a given tooltip, for instance:

static themes = {
	"deserted-chateau": {
		theme: "deserted-chateau",
		placement: "auto",
		delay: [750, null],
		zIndex: 999999,
	},
	"deserted-chateau-inline": {
		theme: "deserted-chateau-inline",
		placement: "auto",
		delay: [750, null],
		zIndex: 999999,
	},
	"deserted-chateau-explanation-tooltip": {
		theme: "deserted-chateau",
		placement: "auto",
		delay: [250, null],
		zIndex: 999999,
	},
	"deserted-chateau-inline-error": {
		theme: "deserted-chateau-inline-error",
		placement: "auto",
		delay: [0, null],
		zIndex: 999999,
	},
	"inline-modal-tooltip": {
		theme: "inline-modal-tooltip",
		allowHTML: true,
		hideOnClick: false,
		trigger: 'click',
		placement: 'left',
		interactive: true,
		showOnCreate: true,
		onClickOutside(instance, event) {
			instance.hide();
		},
		delay: [0, 1000000],
		zIndex: 999999,
	},
};

The "deserted-chateau" and "deserted-chateau-explanation-tooltip" theme presets both use the same underlying Tippy.js theme, but define different delays for how long the element must be hovered before the tooltip itself will appear.

Back to top