Attaches qTip2 library.

cdesai_tff.libraries.yml

@@ -0,0 +1,16 @@
+qTip2:
+  remote: https://github.com/qTip2/qTip2
+  version: 3.0.3
+  license:
+    name: MIT
+    url: https://github.com/qTip2/qTip2/blob/master/LICENSE
+    gpl-compatible: true
+  js:
+    https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js: { type: external, minified: true }
+    js/tooltip.js: { }
+  css:
+    theme:
+      https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css: { type: external, minified: true }
+      css/tooltip.css: { }
+  dependencies:
+    - core/jquery

css/tooltip.css

@@ -0,0 +1,4 @@
+.cdesai-tff-tooltip {
+  margin: 1em 0;
+  cursor: crosshair;
+}

js/tooltip.js

@@ -0,0 +1,19 @@
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  Drupal.behaviors.cdesai_tff_tooltip = {
+    attach: function (context, settings) {
+      $('body', context).once('cdesai_tff_tooltip').each(function () {
+
+        $('[data-tooltip!=""]').qtip({
+          content: {
+            attr: 'data-tooltip'
+          }
+        });
+
+      });
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);

src/Plugin/Field/FieldFormatter/TooltipTextFormatter.php

@@ -45,6 +45,11 @@ class TooltipTextFormatter extends DesaiTextFormatterBase {
           'class' => [$this->getCssClassId()],
           'data-tooltip' => $random->sentences(self::$MIN_WORDS),
         ],
+        '#attached' => [
+          'library' => [
+            'cdesai_tff/qTip2'
+          ],
+        ],
       ];
     }