Tooltip

The TkTooltip is used to display additional information when element is hovered over.

React

import { TkTooltip } from '@takeoff-ui/react'

Vue

import { TkTooltip } from '@takeoff-ui/vue'

Angular

import { TkTooltip } from '@takeoff-ui/angular'

Variants

Provides 7 different variants dark, white, info, success, danger, warning, neutral via variant property.

View Code

React

<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="white"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="info"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="success"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="danger"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="warning"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="neutral"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>

Vue

<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="white"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="info"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="success"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="danger"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="warning"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="neutral"
>
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
</TkTooltip>

Angular

<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="white"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="info"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="success"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="danger"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="warning"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="neutral"
>
  <tk-button slot="trigger" label="Hover Me!"></tk-button>
</tk-tooltip>

Position

Establishes 12 different placement position top-start, top, top-end, right-start, right, right-end, bottom-start, bottom, bottom-end, left-start, left, left-end via position property.

View Code

React

<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Top Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Top" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Top End" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Right Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Right" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Right End" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Left Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Left" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Left End" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Bottom Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Bottom" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Bottom End" />
</TkTooltip>

Vue

<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Top Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Top" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Top End" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Right Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Right" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Right End" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Left Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Left" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Left End" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom-start"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Bottom Start" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Bottom" />
</TkTooltip>
<TkTooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom-end"
  icon="flight"
  variant="dark"
>
  <TkButton slot="trigger" label="Bottom End" />
</TkTooltip>

Angular

<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top-start"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Top Start" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Top" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="top-end"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Top End" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right-start"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Right Start" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Right" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="right-end"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Right End" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left-start"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Left Start" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Left" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="left-end"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Left End" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom-start"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Bottom Start" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Bottom" />
</tk-tooltip>
<tk-tooltip
  header="Tooltip Header"
  description="Tooltip Explanation Here"
  position="bottom-end"
  icon="flight"
  variant="dark"
>
  <tk-button slot="trigger" label="Bottom End" />
</tk-tooltip>

Tooltip API

Props

Name	Type	Default	Description
	CSSStyleProperties	null	The style attribute of container element
	string	null	Sets description text for the tooltip.
	string	null	Sets header text for the tooltip.
	IIconOptions, IMultiIconOptions, string	null	Specifies a material icon name to be displayed.
	"bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start"	'right'	Sets the position of the tooltip.
	"danger", "dark", "info", "neutral", "success", "warning", "white"	'neutral'	Sets the color variant of the tooltip.

Slots

Name	Description
content	Define custom HTML content for the tooltip, which replaces the default header, description and icon elements
trigger	The trigger slot defines the element that will trigger the tooltip