> For the complete documentation index, see [llms.txt](https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/components/tooltip.md).

# Tooltip

A floating label that helps to explain the function of a user interface element. It can be triggered when users hover, tap, or click.

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v2.1/components.html#tooltip-wrapper)

### Example

Tool tips are consistently displayed on top of link items with a downward-pointing arrow. They ought to appear on a black background with white text. Tooltips will have a dashed bottom border, as depicted below.

<div align="left"><figure><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5tcH1W94H2w1w4BOYwsj%2Fuploads%2FZ3zTOIPDgziNg7w75yUO%2Fimage.png?alt=media&amp;token=df7cf82b-24e2-402f-9702-1364bf28f89c" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
The tooltip will appear on top while its bottom border becomes solid upon hovering, as demonstrated below.
{% endhint %}

<div align="left"><figure><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5tcH1W94H2w1w4BOYwsj%2Fuploads%2F83xrRRjq0dFYhbYXQ8vX%2Fimage.png?alt=media&amp;token=6b07f4f1-8da9-4749-ab59-3992a77ca59c" alt=""><figcaption></figcaption></figure></div>

{% code overflow="wrap" %}

```html
<p class=" text-start "> Lorem Ipsum is simply dummy text of the printing and <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on top">typesetting industry</a>scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on top">typesetting industry</a>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on top">typesetting industry</a>with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
```

{% endcode %}