Tooltip - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<button class="ts-button is-icon" data-tooltip="Favorite">
    <span class="ts-icon is-heart-icon"></span>
</button>

Introduction

Tooltip displays when the cursor hovers over or focuses on an element with [data-tooltip] attribute.

Compositions

Input Tooltip

Specify the focus trigger on Input to show the tooltip when the user types.

<div class="ts-input is-start-icon" data-tooltip="Usernames must be between 6 and 24 characters." data-trigger="focus" data-position="bottom-start">
    <span class="ts-icon is-user-icon"></span>
    <input type="text" placeholder="Username">
</div>

Helper Icon

The text element with [tabindex] attribute can be focused, so users with touch screens can click the icon to open the tooltip.

The building lacks funding

The building lacks funding <span class="ts-icon is-circle-question-icon" data-tooltip="You must allocate a budget." data-trigger="focus" tabindex="0"><span>

Properties

	Description	Default Value
[data-position]	Position that the popup should appear: `top` `top-start` `top-end` `bottom` `bottom-start` `bottom-end`	`bottom`
[data-trigger]	Events that trigger the tooltip, separated by space (e.g., `hover focus`): `hover` when the cursor hovers over the element (no effect on touch devices). `focus` when the element receives focus, used for inputs.	`hover`
[data-delay]	Delay time in milliseconds from trigger to display. Set to `0` for immediate, `1000` for 1 second.	`200`
[data-html]	Whether the tooltip's content can contain HTML. Set to `true` to enable.	`false`