QTooltip

QTooltip provides additional information when hovering over or focusing an element. Use the trigger snippet to attach it to a button or another element. Tooltips inherit the target's direction and language; use dir or lang to override them.

QTooltip can be positioned around its target element using the position prop. Available positions are top, right, bottom (default), left, and their corner combinations.

Fine-tune tooltip positioning with the offset prop. This accepts an object with x and y values to adjust the position in pixels.

Control the timing of tooltip appearance and disappearance with the delay and hideDelay props. These values are specified in milliseconds.

Instead of a trigger snippet, you can attach a tooltip to an existing element using the target prop with either a DOM element or a CSS selector.

Tooltips can contain rich content, not just text. You can include icons, formatted text, and interactive elements. For interactive content, use a labelled role="dialog" and press Tab from the trigger to reach its actions.

Control tooltip visibility programmatically using the value prop with two-way binding. Setting the value changes visibility immediately. Hover and focus still work normally; the timing props apply to these interactions and the show/hide methods.

QTooltip exposes methods that can be called directly for programmatic control: show, hide, and toggle. Access these methods by binding to the component with bind:this.

Tooltips can be styled using standard class properties. This allows you to customize their appearance to match your application's design. You can also create rich content tooltips using components like QCard.