Generating tooltips
Last updated
Was this helpful?
Last updated
Was this helpful?
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 to generate its tooltips on entity mentions and various other elements, and we can tap into that library by simply adding a few data attributes to our HTML elements.
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 entities to better integrate your character sheet with Kanka:
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:
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.
