---
title: "Tooltip"
description: "Tooltip is a floating text label that succinctly describes the function of an interactive element, typically Icon Button."
sidebar_label: "Tooltip"
slug: /reference/components/tooltip
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Tooltip

Tooltip is a floating text label that succinctly describes the function of an interactive element, typically Icon Button. It’s displayed continuously as long as the user hovers over or focuses on the element. Also known as 'Info tip'.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `TooltipProps`  
**Story source:** [`demo/stories/Tooltip.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Tooltip.stories.tsx)

## Live demo

<ComponentDemo name="Tooltip" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactElement` | Yes | The content of the tooltip. |
| `idealPosition` | `union` |  | The ideal position of the tooltip. |
| `includeArrow` | `boolean` |  | If true, an arrow will be included in the tooltip. |
| `text` | `string` |  | The text content of the tooltip. If text is undefined, the children will be rendered without a tooltip. |