# Generating tooltips
Sometimes, the inner workings and expectations of a character sheet aren’t entirely obvious, but you don’t want to clutter it by adding explanatory text everywhere. Being on the Web gives us an easy way to have our cake and eat it too: tooltips. Kanka uses the [Tippy library](https://atomiks.github.io/tippyjs/) to generate its tooltips on entry mentions and various other elements, and we can tap into that library by simply adding a few data attributes to our HTML elements.
{% code overflow="wrap" %}
```html
```
{% endcode %}
* **data-tooltip:** Identifies the element as a tooltip holder at page load. There is no need to give it a value.
* **data-html:** Optional parameter; if present and set to "true", HTML tags in the tooltip content will be parsed. Otherwise they will be treated as plain text.
* **data-title:** The content that will be shown inside the tooltip when hovered. Can include HTML if `data-html` is set to "true".
* **data-direction:** By default, Kanka displays tooltips under the host element. You can set a different placement with this attribute. See for all supported values.
You can also replicate the hint icon in places such as the Pins sidebar of entries to better integrate your character sheet with Kanka:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Another possible format is to replace `data-tooltip` with `data-dropdown`. For example, you could borrow the styling of the post actions dropdown and trigger different JavaScript actions/functions based on which link the user clicks:
{% code overflow="wrap" %}
```html
```
{% endcode %}
The logic here is that Tippy looks for an element that has `data-dropdown` on it, then looks for the first element with the class `dropdown-menu` on the same level (i.e. under the same parent element) to display on hover. Even if your tooltip’s content is not functionally a group of options, you can choose this approach when your tooltip has a complex HTML structure or a lot of text and you want it to be more legible than cramming it all in a data attribute.
{% hint style="info" %}
See [Styling tooltips](/kanka-cookbook/css/styling-tooltips.md) for CSS guidance regarding Tippy in Kanka.
{% endhint %}
#### Dynamic tooltip contents
If you use JavaScript to populate your character sheet, or more specifically to set or change a tooltip’s content after initial page load, you should note that Tippy will load before your script and only see the HTML elements and attributes that exist before your script runs; therefore, the tooltips’ contents may not match your intent. To circumvent this problem, I first insert the necessary elements in the HTML field of my plugin so that Tippy can recognize and handle them, e.g. `{{$_entity_name}}`.
Then, in my JavaScript field, I can process and alter the intended tooltip content as needed, before invoking the `_tippy.setContent()` method on each element.
For example, in one of my character sheets, I loop through every HTML element that has the `data-tooltip` attribute but doesn’t already have a `data-title` (`e`) and tell Tippy to use the inner HTML of the element (which I have modified with JS) as its tooltip content:
```javascript
document.querySelectorAll("[data-tooltip]:not([data-title])").forEach( (e) => {
if (e.innerHTML.length > 0) {
e.dataset.html = "true";
e._tippy.setContent(e.innerHTML);
}
```
Using this method, there is no need to set the `data-title` attribute at all (and creating it alone would not update the Tippy instance, as it only looks at `data-title` when initialized and does not watch for changes).
[](https://ko-fi.com/salvatos)
---
# 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://salvatos.gitbook.io/kanka-cookbook/plugin-creators/generating-tooltips.md?ask=
```
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.