How to create a Tooltip in CKEditor

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

1. Select a text in the WYSIWYG
2. Click on the Tooltip button in the CKEditor toolbar
3. You are provided with a new dialog window (see screenshot above)
4. (option 1) Select an existing Tooltip block or Custom block (see "How to create a new Tooltip block below" is the list is empty)
5. (option 2) Enter text/markup manually in the Tooltip content input
6. Select the tooltip placement
7. Select wether or not to display the tooltip arrow
8. Click on insert

You have successfully inserted a new span with a custom data-tooltip attribute in your WYSIWYG, such as something like in source code:

<span data-tooltip="{&quot;block&quot;:null,&quot;content&quot;:&quot;Save the trees 🌲. Do not read the news 🗞️.&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;arrow&quot;:true}">Lorem ipsum</span>

Save your content and visit your frontend to view the Tooltip on hover.