mmo-tooltip

1 symbole · générée le 27 Oct 2026

element

mmo-tooltip

An "i" next to a label that explains it: pointing at it (or focusing it, or tapping it) opens a bubble with the slotted content, above the icon or below it when there is no room, kept inside the window.

<mmo-tooltip></mmo-tooltip>

Étend: CustomShadowElement

The bubble lives in the top layer (`popover`), so a parent's `overflow: hidden` or `z-index` never cuts it, and it stays open while the pointer travels into it, so a link inside it can be clicked.

Index

	init()
	updateTipIcon()	The icon of the variant (`.success`, `.error`, `.warning`), read at each opening so a class changed later is followed.
	showTip(now)	Open the bubble, after a short delay unless `now` (so a pointer only crossing the icon opens nothing).
	hideTip(now)	Close the bubble, after a short grace delay unless `now` (time for the pointer to reach the bubble).
	placeTip()	Put the bubble above the icon, centred on it, or below when the space above is too short; then slide it sideways so it stays 8px inside the window, the arrow still pointing at the icon.
	(default)	what the bubble says
	.compact	no badge in the bubble, a tighter bubble: for a one-line explanation
	.success	set success colors for the tooltip
	.error	set error colors for the tooltip
	.warning	set warning colors for the tooltip

Méthodes5

init()

mmo-tooltip.jhs:23

init()

updateTipIcon()

mmo-tooltip.jhs:58

The icon of the variant (.success, .error, .warning), read at each opening so a class changed later is followed.

updateTipIcon()

showTip(now)

mmo-tooltip.jhs:70

Open the bubble, after a short delay unless now (so a pointer only crossing the icon opens nothing).

showTip(now = false)

now = false

hideTip(now)

mmo-tooltip.jhs:98

Close the bubble, after a short grace delay unless now (time for the pointer to reach the bubble).

hideTip(now = false)

now = false

placeTip()

mmo-tooltip.jhs:122

Put the bubble above the icon, centred on it, or below when the space above is too short; then slide it sideways so it stays 8px inside the window, the arrow still pointing at the icon.

placeTip()