From 81f24ad036907d96746df5bd25f3f98a0a63add8 Mon Sep 17 00:00:00 2001
From: Oliver Tacke <o.tacke@posteo.de>
Date: Wed, 16 Oct 2024 10:42:16 +0200
Subject: [PATCH] HFP-4135 Add tooltip for dropped draggables

---
 src/scripts/drag-text.js |  6 ++++--
 src/scripts/draggable.js | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/scripts/drag-text.js b/src/scripts/drag-text.js
index 888cc5d..352c8b7 100644
--- a/src/scripts/drag-text.js
+++ b/src/scripts/drag-text.js
@@ -226,12 +226,14 @@ H5P.DragText = (function ($, Question, ConfirmationDialog) {
    */
   DragText.prototype.updateDroppableElement = function(event) {
     const dropZone = event.data.target;
-    const draggable = event.data.element;
+    const draggable = this.getDraggableByElement(event.data.element);
     const droppable = this.getDroppableByElement(dropZone);
 
     if (dropZone) {
-      this.setDroppableLabel(dropZone, draggable.textContent, droppable.getIndex());
+      this.setDroppableLabel(dropZone, event.data.element.textContent, droppable.getIndex());
     }
+
+    draggable.setTooltipText(event.type === 'drop' ? draggable.text : '');
   };
 
   /**
diff --git a/src/scripts/draggable.js b/src/scripts/draggable.js
index 794a8e9..5b07f1d 100644
--- a/src/scripts/draggable.js
+++ b/src/scripts/draggable.js
@@ -33,6 +33,8 @@ H5P.TextDraggable = (function ($) {
     self.$draggable.on('touchstart', stopPropagation);
     self.$draggable.on('touchmove', stopPropagation);
     self.$draggable.on('touchend', stopPropagation);
+
+    self.tooltip = H5P.Tooltip(self.$draggable.get(0), {position: 'bottom'});
   }
 
   Draggable.prototype = Object.create(H5P.EventDispatcher.prototype);
@@ -223,6 +225,18 @@ H5P.TextDraggable = (function ($) {
     this.$draggable.html(this.shortFormat);
   };
 
+  /**
+   * Set tooltip text.
+   * @param {string} text Tooltip text.
+   */
+  Draggable.prototype.setTooltipText = function (text) {
+    if (typeof text !== 'string') {
+      return;
+    }
+
+    this.tooltip.setText(text);
+  };
+
   /**
    * Get short format of draggable when inside a dropbox.
    *