diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Tooltip.js
--- a/src/widgets/Tooltip.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Tooltip.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,94 +1,113 @@
 /* this widget displays a small tooltip */
-IriSP.Widgets.Tooltip = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-};
+import tooltipStyles from "./Tooltip.module.css";
+
+const Tooltip = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
+
+    static defaults = {};
+
+    static template =
+      '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>' +
+      '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>' +
+      '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>' +
+      '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>' +
+      '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>' +
+      '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">' +
+      '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';
 
-IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.Tooltip.prototype.defaults = {
-    
-};
+    draw() {
+      const _this = this;
+      this.renderTemplate();
+      this.$.parent().css({
+        position: "relative",
+      });
+      this.$tooltip = this.$.find(".Ldt-Tooltip");
+      this.$tip = this.$.find(".Ldt-Tooltip-Tip");
+      this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");
+      this.$se = this.$.find(".Ldt-Tooltip-Border-SE");
+      this.__halfWidth = Math.floor(
+        (this.$.find(".Ldt-Tooltip-Main").width() || 192) / 2
+      );
+      this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();
+      this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width() / 2);
+      this.__maxShift = this.__tipDelta - this.__borderWidth;
+      this.$.mouseover(function () {
+        _this.$tooltip.hide();
+      });
+      this.hide();
+    }
 
-IriSP.Widgets.Tooltip.prototype.template =
-    '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>'
-    + '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>'
-    + '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>'
-    + '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>'
-    + '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>'
-    + '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">'
-    + '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';
+    show(x, y, text, color) {
+      if (typeof color !== "undefined") {
+        // one color or array of colors
+        if (typeof color === "string") {
+          this.$.find(".Ldt-Tooltip-Color").html("");
+          this.$.find(".Ldt-Tooltip-Color")
+            .show()
+            .css("background-color", color);
+          this.$.find(".Ldt-Tooltip-Color").show().css("height", "");
+        } else {
+          var d = this.$.find(".Ldt-Tooltip-Color");
+          d.html("");
+          d.show();
+          for (var i = 0; i < color.length; i++) {
+            d.append(
+              '<div style="float: left; height: 10px; width: 10px; background-color: ' +
+                color[i] +
+                '">'
+            );
+          }
+          this.$.find(".Ldt-Tooltip-Color").css(
+            "height",
+            color.length * 10 + "px"
+          );
+        }
+      } else {
+        this.$.find(".Ldt-Tooltip-Color").hide();
+      }
+
+      this.$.find(".Ldt-Tooltip-Text").html(text);
+
+      this.$tooltip.show();
 
-IriSP.Widgets.Tooltip.prototype.draw = function() {
-    _this = this;
-    this.renderTemplate();
-    this.$.parent().css({
-        "position" : "relative"
-    });
-    this.$tooltip = this.$.find(".Ldt-Tooltip");
-    this.$tip = this.$.find(".Ldt-Tooltip-Tip");
-    this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");
-    this.$se = this.$.find(".Ldt-Tooltip-Border-SE");
-    this.__halfWidth = Math.floor(( this.$.find(".Ldt-Tooltip-Main").width() || 192)/2);
-    this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();
-    this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width()/2);
-    this.__maxShift = this.__tipDelta - this.__borderWidth;
-    this.$.mouseover(function() {
-        _this.$tooltip.hide();
-    });
-    this.hide();
+      var shift = 0;
+
+      if (
+        typeof this.min_x !== "undefined" &&
+        x - this.__halfWidth < this.min_x
+      ) {
+        shift = Math.max(x - this.__halfWidth - this.min_x, -this.__maxShift);
+      }
+
+      if (
+        typeof this.max_x !== "undefined" &&
+        +x + this.__halfWidth > this.max_x
+      ) {
+        shift = Math.min(+x + this.__halfWidth - this.max_x, this.__maxShift);
+      }
+
+      this.$tooltip.css({
+        left: x - shift + "px",
+        top: y + "px",
+      });
+      this.$tip.css({
+        left: this.__tipDelta + shift + "px",
+      });
+      this.$sw.css({
+        width: this.__tipDelta + shift - this.__borderWidth + "px",
+      });
+      this.$se.css({
+        width: this.__tipDelta - shift - this.__borderWidth + "px",
+      });
+    }
+
+    hide() {
+      this.$tooltip.hide();
+    }
+  };
 };
 
-IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) {
-    
-    if (typeof color !== "undefined") {
-    	// one color or array of colors
-    	if (typeof color === "string") {
-    		this.$.find(".Ldt-Tooltip-Color").html("");
-    		this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
-    		this.$.find(".Ldt-Tooltip-Color").show().css("height", "");
-    	}
-    	else{
-    		var d = this.$.find(".Ldt-Tooltip-Color");
-    		d.html("");
-    		d.show();
-    		for(var i=0; i<color.length; i++){
-    			d.append('<div style="float: left; height: 10px; width: 10px; background-color: ' + color[i] + '">')
-    		}
-    		this.$.find(".Ldt-Tooltip-Color").css("height", (color.length * 10) + "px");
-    	}
-    } else {
-        this.$.find(".Ldt-Tooltip-Color").hide();
-    }
-
-    this.$.find(".Ldt-Tooltip-Text").html(text);
-
-    this.$tooltip.show();
-    
-    var shift = 0;
-    
-    if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) {
-        shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift);
-    }
-    
-    if (typeof this.max_x !== "undefined" && (+x + this.__halfWidth > this.max_x)) {
-        shift = Math.min(+ x + this.__halfWidth - this.max_x, this.__maxShift);
-    }
-    
-    this.$tooltip.css({
-        "left" : (x - shift) + "px",
-        "top" : y + "px"
-    });
-    this.$tip.css({
-        "left": (this.__tipDelta + shift) + "px"
-    });
-    this.$sw.css({
-        "width": (this.__tipDelta + shift - this.__borderWidth) + "px"
-    });
-    this.$se.css({
-        "width": (this.__tipDelta - shift - this.__borderWidth) + "px"
-    });
-};
-
-IriSP.Widgets.Tooltip.prototype.hide = function() {
-    this.$tooltip.hide();
-};
+export { Tooltip, tooltipStyles };