How to display a Tooltip in a View

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

Create the View

• Create a view as you would normally do, from Admin > Structure > View > Add new View
• Add fields on the View
• Add the Rendered Entity field and select Exclude from display
• Click on Rearrange fields and make sure the Rendered Entity field is first
• Save your changes

Now we will insert the Tooltip using the Rewrite results options:

• Edit a field - for instance the Title field
• Select Rewrite results
• Insert the tooltip markup as follow
  

  {% set options = {"content": "<div>" ~ rendered_entity ~ "</div>", "placement": "top"} %}
  <div data-tooltip="{{ options|json_encode }}">{{ title }}</div>

  Note that we use the rendered_entity field we've placed and excluded from display above
   

• Save your changes

Now you just need to attach the library to this View.

Attach the tooltip library

Make sure you load the tooltip/tooltip library (e.g. see how to proceed in the Quickstart guide).

Alternatively, simply attach the library in a custom Twig template for your specific View, as follow:

{#
/**
 * @file
 * Default theme implementation to display a view.
 *
 * File: <yourtheme>/templates/views/views-view--<your-view-id>.html.twig * 
 * @see https://api.drupal.org/api/drupal/core%21modules%21views%21views.theme.inc/group/views_templates/8.2.x
 */
#}

{# Attach the library #}
{{ attach_library ('tooltip/tooltip') }}

{# Render View #}
{# Use a default template from core for instance: 'core/themes/starterkit_theme/templates/views/views-view.html.twig' #}
<div{{ attributes }}>...</div>

That's it! Enjoy the view...

Example

Below is a screenshot of a Calendar View with the details of the event in a Tooltip on hover: