> 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

### [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="/files/kvRBsueXwE6WnfAxZmH6" 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="/files/jJXB8Ng4AYf6wdmJnqmB" 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 %}