Tooltip

Published on February 18, 2021, updated on June 01, 2021

Element: <ins-tooltip>

Creates a tooltip element.

Complete Example

Code Snippet

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

Code Snippet

<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>

Code Snippet

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

Default State

Code Snippet

<ins-tooltip></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

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.