cnc-tooltip
Contextual guidance anchored to its slotted trigger. It supports primary text, an optional description, custom content, touch interaction, collision-aware positioning, and accessible tooltip semantics.
Quick start
Set text and place the trigger in the default slot. The default trigger is hover on
pointer devices and tap on touch devices. An arrow is shown unless noArrow is set.
<cnc-tooltip text="Save changes" placement="top-center">
<cnc-button label="Hover or tap"></cnc-button>
</cnc-tooltip>Usage guidance
A tooltip must never hold something the user NEEDS. It is unavailable to a mouse that never hovers, awkward on touch, and gone the moment attention moves — so put required information in the page and keep the tooltip for the clarification that saves a guess. A label that only exists in a tooltip is a label that some of your users will never read.
Keep it to a phrase, with description for a second line when one is genuinely
needed. Once the bubble holds controls, links or anything the user must reach into, it has
stopped being a tooltip: interactive will keep it open long enough to click, but
cnc-popup
or cnc-drop is the honest widget for that.