Component library

Tooltip

Last updated 2 November 2026

Creates a tooltip element.

Live demo

<ins-tooltip
  label="?"
  content="Hello World">
</ins-tooltip>

Attributes

ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	“”	any	Defines the text displayed on the tooltip label
shape	string	circle	circle, rectangle	Defines the shape of the tooltip label
icon	string	“”	any	Applies the font-icon class to the tooltip label
position	string	top	top, bottom, left, right (_-start, _-end)	Defines the default position the tooltip is to be displayed
content	string	“”	any	Content displayed on the tooltip
background	boolean	true	true, false	Enable / Disables background color for tooltip
html	boolean	false	true, false	Makes the tooltip content render as HTML code
trigger	string	hover focus	hover, focus, click	Defines how the tooltip is triggered You may pass multiple triggers; separate them with a space
close-on-click	boolean	true	true, false	Makes the content hide when user click anywhere outside the tooltip Only works for trigger on `'click'`
width	string	“”	any	Specifies the width for the tooltip content You may pass any proper CSS width value; ex.(100px, 100%, 100vw, 100em, etc…)
auto-width	boolean	false	true, false	Apply auto width to the tooltip content with CSS property `'white-space: nowrap'` For best responsive result, it is ideal to only enable this for short contents

Examples

Tooltip - v2 Complete Example 2

<ins-tooltip
  label="sample"
  shape="rectangle"
  icon="icon-warning"
  position="right"
  trigger="click"
  width="500px"
  content="This is an example of a tooltip that also utilizes other tooltip properties. You can check other properties can at the table below.">
</ins-tooltip>

Tooltip - v2 Complete Example 3

<ins-tooltip
  label="html tooltip"
  shape="rectangle"
  icon="icon-warning"
  background="false"
  position="bottom-start"
  html="true"
  trigger="hover"
  width="300px"
  content="<p>This is an HTML content example with a <a href='#'>link</a>.">
</ins-tooltip>

Default State

<ins-tooltip></ins-tooltip>