add tooltip to facet with description

components/01-atoms/popover/_popover.scss

@@ -0,0 +1,9 @@
+:popover-open {
+  width: 200px;
+  height: 100px;
+  position: absolute;
+  inset: unset;
+  bottom: 5px;
+  right: 5px;
+  margin: 0;
+}

components/01-atoms/popover/popover.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import popovers from './popover.twig';
+
+/**
+ * Storybook Definition.
+ */
+export default { title: 'Atoms/popover ' };
+
+export const popover = () => (
+  <div dangerouslySetInnerHTML={{ __html: popovers({}) }} />
+);

components/01-atoms/popover/popover.twig

@@ -0,0 +1,4 @@
+<p style="margin-top: 100px;">
+  <button popovertarget="my-popover">Open Popover</button>
+  <div popover id="my-popover">Greetings, one and all!</div>
+</p>

dingo.theme

@@ -116,7 +116,11 @@ function dingo_preprocess_facets_result_item(&$variables) {
   $facet = $variables['facet'];
   $term_id = $variables['raw_value'];
 
-  $term_description = \Drupal\taxonomy\Entity\Term::load($term_id)->get('description')->value;
+  if($facet->getFieldIdentifier() == 'field_oda_population') {
+    if ( \Drupal\taxonomy\Entity\Term::load($term_id) ) {
+      $term_description = \Drupal\taxonomy\Entity\Term::load($term_id)->get('description')->value;
+    }
+  }
 
   if(isset($term_description)) {
     $variables['term_description'] = rtrim(strip_tags($term_description));

templates/form/facets-result-item.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a facet result item.
+ *
+ * Available variables:
+ * - value: The item value.
+ * - raw_value: The raw item value.
+ * - show_count: If this facet provides count.
+ * - count: The amount of results.
+ * - is_active: The item is active.
+ * - facet: The facet for this result item.
+ *   - id: the machine name for the facet.
+ *   - label: The facet label.
+ *
+ * @ingroup themeable
+ */
+#}
+{% if is_active %}
+  <span class="facet-item__status js-facet-deactivate">(-)</span>
+{% endif %}
+{% if term_description %}
+  <span class="facet-item__value tooltip" data-tooltip="{{ term_description }}">{{ value }}</span>
+{% else %}
+  <span class="facet-item__value">{{ value }}</span>
+{% endif %}
+{% if show_count %}
+  <span class="facet-item__count">({{ count }})</span>
+{% endif %}