Tooltips

Tooltips are a feature that allows games to show information tooltips when hovering certain keywords.

They are fully configurable and automated. All you need is to create a list of tooltips, and the engine will make them appear automatically.

DANGER

As of 4.1.0, if you were using the old tooltip system before, tooltips now have a suffix. You can either change nothing and keep using the old system, or update your config and tooltips and add useNewSystem: true to the tooltips.yaml file, and then add a suffix to all keywords in your tooltips.

This tooltip appears when the player hovers the word bread.

How to use tooltips in narrat

To use this feature, the new tooltips.yaml config file is needed:

tooltips.yaml

Tooltips are created and configured in the tooltips.yaml file:

options:
  width: 350
  keywordsPrefix: '@t{'
  keywordsSuffix: '}@'
tooltips:
  - keywords: [bread, breads]
    title: Bread
    description: Bread is a staple food prepared from a dough of flour (usually wheat) and water, usually by baking. Throughout recorded history and around the world, it has been an important part of many cultures' diet. It is one of the oldest human-made foods, having been of significance since the dawn of agriculture, and plays an essential role in both religious rituals and secular culture.

Remember to include the tooltips.yaml file in your src/configs/index.ts file, so it gets loaded by the engine.

INFO

Tooltips keywords can be sentences with space, accents, etc. Simply wrap the keyword in quotes, like this:

tooltips:
  - keywords: ['sentence tooltip']

General tooltips config

• width: Width of tooltip box in pixels
• keywordsPrefix: The prefix to use before words in scripts to make the tooltip appear. Use something that won't appear in normal text, like @t{.
• keywordsSuffix: The suffix to use after words in scripts to make the tooltip appear. Use something that won't appear in normal text, like }@.

Options for individual tooltips

• keywords: A list of all possible keywords to match for showing this tooltip. It's case insensitive.
• title: The title of the tooltip popup that will appear
• description: The content of the tooltip popup

Then, to use in scripts, for example:

main:
  talk player idle "I like @t{bread}@"

Having one of the keywords defined in the tooltips with the keywordsPrefix before it will make it be detected as a keyword and show the tooltip

Styling tooltips

You can override css classes used in tooltips to style them, but it's also possible to configure custom css classes for all tooltips or for individual tooltips:

options:
  styling:
    textCssClass: test
    titleCssClass: test
    cssClass: test
tooltips:
  - keywords: [bread, breads]
    title: Bread 🍞🥖
    styling:
      textCssClass: test
      titleCssClass: test
      cssClass: test

Any of the above css options can be used to make tooltips get custom css classes

Old tooltip system