Change record status: 
Project: 
Introduced in branch: 
11.x
Introduced in version: 
11.x
Description: 

A toggletip component has been added that could be used to add extra information without crowding the UI. The toggletip uses the floating UI library.

There are two ways to add a toggletip element, using a render array and directly in the markup. The place property is top-end by default.

Render array example:

   'my_div' => [
        '#type' => 'container',
        '#markup' => 'A container render array',
        '#toggletip' => [
          'content' => '<p>My content inside the toggletip</p>',
          'place' => 'right-end',
          'atDescription' => 'This property should describe the information this button reveals for accessibility reasons.',
        ],
      ],

Markup example:

 'added_in_markup' => [
        '#type' => 'container',
        'text' => [
          '#markup' => 'Sometimes for placeholder text we use <span data-drupal-toggletip="Testinggggg">IPSUM!</span>, and that is nice.',
        ],
      ],
Impacts: 
Site builders, administrators, editors
Module developers
Themers