Skip to content

Tooltip API

ts
import { bindTooltip } from 'sodialog'
import 'sodialog/style.css'

const tooltip = bindTooltip({ target: '#save', content: 'Save current settings' })
// Call tooltip.destroy() when the owning component unmounts.

Exports

SoTooltip.bind(options) equals bindTooltip(options). SoTooltip.configure(defaults) equals configureTooltip(defaults). Global defaults apply to future bindings only. Types include SoTooltipOptions, SoTooltipDefaults, SoTooltipHandle, SoTooltipTarget, SoTooltipContent, and SoTooltipPlacement.

SoTooltipOptions

OptionTypeDefaultBehavior
targetstring | Element | Iterable<Element> | ArrayLike<Element>RequiredSelectors delegate events and include future matches.
contentstring | (trigger: Element) => stringdata-sod-tooltipRenders plain text; empty text does not open.
placementtop | bottom | left | righttopFlips when space is insufficient and clamps to the viewport.
offsetnumber8Gap from the target in px.
showDelay / hideDelaynumber500 / 100Mouse delays in ms; keyboard focus opens immediately.
skipDelaynumber300Hover opens immediately shortly after another tooltip closes.
touchDelay / touchHideDelaynumber600 / 1500Long press delay and post-release visibility in ms.
disabledbooleanfalsePrevents the tooltip from opening.
themeclassic | modern | minimalGlobal themeTheme for this binding.

Negative timing and offset values become 0. The content function runs when shown and HTML is never parsed. Avoid a native title on the same target or the browser may display a second tooltip.

SoTooltipHandle

MemberBehavior
elementLazily created element; null before first show and after destroy.
show(target?)Shows immediately. The target may be omitted for a single element; collections and selectors require a matching Element.
hide()Hides immediately and cancels a pending show.
setContent(content)Replaces content and refreshes an open tooltip.
isOpen()Returns visibility state.
destroy()Removes listeners, timers, observers, DOM, and its own aria-describedby token. Safe to repeat.

Only one SoDialog Tooltip is visible at a time. The tooltip has role="tooltip", and the trigger references it with aria-describedby while keeping existing IDs. Escape dismisses without moving focus. Long press preserves the trigger's click; scrolling, significant movement, or pointer cancellation stops the pending hint.

Released under the MIT License.