Tooltips - Done

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.

Module	Global Depenedency
Tippy.js	Yes
Tippy.css	Yes

How It Works

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

How to Use

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

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

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

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

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

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