---
title: Tooltips - Done
slug: tooltips-done
createdAt: 2025-01-09T21:27:45.481Z
---

# Overview

This tooltip system allows you to easily add tooltips to any element (e.g. \<div>, \<button>, \<a>, etc. ). It works by detecting elements with the data-tippy-content attribute when the page loads. Optionally, you can specify the tooltip’s position using the data-placement attribute.

***

# Dependencies

Some dependencies are taken care of by Global Dependencies and are provided here for reference.&#x20;

| Module    | Global Depenedency |
| --------- | ------------------ |
| Tippy.js  | Yes                |
| Tippy.css | Yes                |

***

# How It Works

1. **Initialization**:
   - On page load, the system automatically finds elements with the `data-tippy-content` attribute.
   - The value of `data-tippy-content` is used as the text for the tooltip.
2. **Optional Positioning**:
   - By default, tooltips appear at the bottom of the element.
   - To customize the position, use the `data-placement` attribute. Supported values are:
     - `top`
     - `top-start`
     - `top-end`
     - `right`
     - `right-start`
     - `right-end`
     - `bottom` - default if not provided
     - `bottom-start`
     - `bottom-end`
     - `left`
     - `left-start`
     - `left-end`
3. **Styling**:
   - Tooltips follow a predefined style, including background color, text color, padding, font size, and arrow styling. These are controlled through CSS variables for consistency.
4.





***

# How to Use

Tooltips can be used anywhere in the app by simply adding attributes to a element.&#x20;

## Attributes

| Attribute            | Required | Description                                                                                                                                               |
| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-tippy-content` | Required | The text displayed in the tooltip.                                                                                                                        |
| `data-placement`     | Optional | The position of the tooltip (`top`, `bottom`, `left`, or `right`). If data-placement is not included, the tooltip will appear below the element (bottom). |

## Supported Elements

Tooltips can be added to any HTML element, including:

- \<div>
- \<button>
- \<a> (links)
- \<span>

## Example Usage

### Basic Tooltip

Add the `data-tippy-content` attribute to an element. The value of the attribute becomes the tooltip text.

```html
<button data-tippy-content="This is a tooltip!">Hover over me</button>
```

### Custom Tooltip Placement

To control where the tooltip appears, add the data-placement attribute with one of the supported values.

```html
<div data-tippy-content="Tooltip on the right" data-placement="right">Hover over this div</div>
```