@nolgard/webapps-util

Small, framework-independent UI utilities with no runtime dependencies. Currently exports only tooltip; add unrelated utilities only when there is a concrete shared use case. No global auto-initialization, polling or HTML injection.

import { tooltip } from '@nolgard/webapps-util'

const control = tooltip(button, { text: 'Explain this action' })
control.update({ text: 'Updated explanation' })
control.destroy() // Required when removing the trigger.

Svelte:

<script>
  import { tooltip } from '@nolgard/webapps-util'
</script>
<button type="button" aria-label="Help"
  use:tooltip={{ text: 'Explain this section', pinOnClick: true }}>?</button>

The trigger must already have an accessible name. Tooltips contain plain text, not interactive controls. Hover and focus show help; Escape dismisses it before an enclosing dialog handles Escape. Moving onto the tooltip keeps it visible. pinOnClick is optional for help buttons/touch; leave it off for action buttons. Existing aria-describedby references are preserved. Global listeners exist only while a tooltip is shown and are removed on dismissal/destruction.

The bubble stays beside the trigger in its DOM/Shadow DOM tree, including native dialog top layers. Fixed positioning is viewport-clamped and updates on scroll and resize. Do not put triggers in transformed or clipping ancestors: those can change the containing block for fixed positioning. Optional className adds host styles; colors use --tooltip-background and --tooltip-color.

Run npm test to verify lifecycle, keyboard behavior and positioning. Package terms: LICENSE.txt.