# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sg-jds.gitbook.io/judiciary-design-system-beta-bs-5/components/tooltip.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.