Search code examples
javascriptdomgwtsvgtooltip

Using title to display tooltip on SVG object doesn't work when added dynamically in GWT

I am using GWT 2.6.1 (+ GWT Graphics) and trying to draw SVG objects and display a tooltip on each one as follows:

Point point = new Point(100, 100);
Circle reading = new Circle(point.getX(), point.getY(), 3);
reading.setFillColor("#000");
final String infoTip = "120 bpm";
Element titleElement = DOM.createElement("title");
titleElement.setInnerText(infoTip);
reading.getElement().appendChild(titleElement);

Now although the SVG circle draws correctly, the tooltip doesn't work. I tried pasting the generated html into a static html file and that works fine, so it is something to do with dynamically adding the title element to the circle I guess but don't know how to solve it.

I have tried adding the title element inside a deferred action:

Scheduler.Get().ScheduleDeferred(...)

and I have tried adding it in the onLoad:

    Event.sinkEvents(reading.getElement(), Event.ONLOAD);
    Event.setEventListener(reading.getElement(), new EventListener(){});

but no luck.

Solution

  • DOM.createElement() will be creating elements in the HTML namespace. Your <title> element needs to be in the SVG namespace.

    You will need to use native JS DOM methods to do that. See the answer by Jared Garst on this other question for how:

    Using SVG in GWT