Question

I have some text which I display in the web page using GWT HTML object. This text contains a set of specific words. I want to popup something when user clicks ( also if he keeps mouse over it for sometime, if it is easy to implement that) on any of these special words.

How this could be achieved?

Please note that I have complete control over the text and I can add any specific tags around those special words if required.

Answer 1

From any event, you can easily get the exact element target using event.getNativeEvent().getEventTarget(), which you could then check for some specific characteristics of marker elements you’d have inserted into the HTML. So, you’d attach mouse events to the HTML widget and use what’s called “event delegation”.

final HTML widget = new HTML("some text with <span data-my-marker='foo'>marked words</span> in it");
widget.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
      Element target = Element.as(event.getNativeEvent().getEventTarget());
      // walk up until we reach a marker 'span' or the HTML widget's root element
      // just in case the marked words have markup in them
      while (!target.equals(widget.getElement())) {
        if (isMarker(target)) {
          // found a marker 'span'; process it and exit the loop
          String data = span.getAttribute('data-my-marker');
          Window.alert(data);
          break;
        }
        // otherwise, continue looping
        target = target.getParentElement();
      }
   }

   private boolean isMarker(Element elt) {
      return elt.hasTagName("span") && elt.hasAttribute("data-my-marker")
   }
});

(as a side note, about the use of a data-* attribute: http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes )