How to add tooltip to images?

Question

How to add tooltips to images?

Answer 1

OK, here is a more robust, more generic (any node) implementation.
It would be nice if I could find a way to automatically insert the tooltips in the scene, but at time of node with tooltip creation, scene doesn't exist yet... Should have a post-layout event, perhaps. Or I can do that once on the onMouseEntered event, but then I have to find a way to get the scene holding a given node. Tried to iterate on Parents, but I can't cast a Parent to a Scene?
Anyway, here is the new code:
Tooltip.fx
public class Tooltip extends CustomNode
  public var text: String;
  public var fill: Paint = Color.web('#EEFF00');
  public var stroke: Paint = Color.GREEN;
  var label: Label; // Make public to access textOverrun, textWrap, etc.?
  var back: Rectangle;
  override function create(): Node
    label = Label
      text: text
    back = Rectangle
      x: -2, y: -1
      width:  label.width + 4
      height: label.height + 2
      fill:   fill
      stroke: stroke
    Group
      content: [ back, label ]
  init
    visible = false;
    layoutInfo.managed = false;
WithTooltip.fx
public mixin class WithTooltip
  /** The tooltip to display. */
  public var tooltip: Tooltip;
  // We display the tooltip after a while being over the node
  var tooltipTL = Timeline
    keyFrames: KeyFrame
      time: 750ms
      action: function ()
//~         println("visible {%.0f tooltip.boundsInParent.minX} {%.0f tooltip.boundsInParent.minY}");
        tooltip.visible = true;
  var baseMouseMoved;
  var baseMouseEntered;
  var baseMouseExited;
  postinit
    var tooltipNode = this as Node;
    baseMouseMoved = tooltipNode.onMouseMoved;
    tooltipNode.onMouseMoved = function (evt: MouseEvent): Void
      if (not tooltip.visible)
        tooltip.translateX = evt.sceneX;
        tooltip.translateY = evt.sceneY - 20;
      baseMouseMoved(evt);
    baseMouseEntered = tooltipNode.onMouseEntered;
    tooltipNode.onMouseEntered = function (evt: MouseEvent): Void
//~       println("onMouseEntered: {%.0f evt.sceneX} {%.0f evt.sceneY}");
      tooltipTL.playFromStart();
      baseMouseEntered(evt);
    baseMouseExited = tooltipNode.onMouseExited;
    tooltipNode.onMouseExited = function (evt: MouseEvent): Void
//~       println("onMouseExited");
      tooltipTL.stop();
      tooltip.visible = false;
      baseMouseExited(evt);
SomeStage.fx
class ImageWithTooltip extends ImageView, WithTooltip
var earthTT = Tooltip { text: "Mother Earth" }
var earth = ImageWithTooltip
     image: Image { url: "{__DIR__}earth.png" }
     tooltip: earthTT;
var mapTT = Tooltip { text: "General map of France" }
var map = ImageWithTooltip
     image: Image { url: "{__DIR__}map.jpg", width: 200, preserveRatio: true }
     tooltip: mapTT;
// Put the ImageWithTooltip nodes in layout if needed, put the Tooltip nodes at the end of the scene (on top, out of any layout).