Usage

This page is an example of how to use the Tooltip module in Drupal.

Once installed, you can use the Tooltip module in different ways:

• From within your text editor
• With custom content
• With a Block and/or Block content
• In your Twig templates
• In your PHP code

The simplest way to create a new Tooltip is to 1) load the library and 2) add a data-tooltip attribute on one element, as follow:

{{ attach_library('tooltip/tooltip') }}
{# OR add tooltip/tooltip to your theme.info.yml libraries #}

{% set options = {"content": "<div>Save the trees 🌲.<br>Do not read the news 🗞️./div>", "placement": "top"} %}

<div data-tooltip="{{ options|json_encode }}">{{ 'Hover me to read more'|t }}</div>

If you are planning to use a lot a custom Tooltip content on many pages, you can load the library everywhere either in your theme.info.yml or in a module file, as follow:

/**
 * Implements hook_page_attachments() in mymodule.module file
 */
function mymodule_page_attachments(&$page) {
  $page['#attached']['library'][] = 'tooltip/tooltip';
}

In this example, we assume you simply enabled the module without further configuration, thus you have to manually attach the library either in Twig or with the hook_page_attachments(). You can skip this line if you use the Tooltip button in CKEditor or with a custom Tooltip Block. The library will be automatically attached the the page for you.