SVG title

[Snorri B.]

Hi.
I'm playing a bit with the SVG library. i'm trying to add hovering text when the mouse is over an element. Google tells me I need to add the title element to my object, something like

Code (xml) Select Expand


<rect x="0" y="0" width="20" height="20">
<title> Mytitle </title>
</rect>


How can I achieve this? I seems there is no helper function for adding this particular DOM element.

Regards,
-Snorri

[Sebastien F.]

Hi Snorry,

You are right we are missing a title() function in fglsvgcanvas.4gl library.

We will review this, thanks for the suggestion!

Quick workaround:

You need om.DomDocument.createChars() to create the text element for the title node, but the om.DomDocument object used by fglsvgcanvas is not exposed so you have to add this function in the lib:

Code (genero) Select Expand

FUNCTION getDocument()
    CALL _check_canvas_id(current_canvas)
    RETURN canvases[current_canvas].document
END FUNCTION


Then you can build the title node as follows:

Code (genero) Select Expand

    DEFINE doc om.DomDocument
    DEFINE g, t, tt om.DomNode
    ...
    LET g = fglsvgcanvas.g( "clock" )
    LET t = fglsvgcanvas.createElement("title",101)
    LET doc = fglsvgcanvas.getDocument()
    LET tt = doc.createChars("The text to be displayed")
    CALL t.appendChild( tt )
    CALL g.appendChild( t )
    ...


Seb

[Snorri B.]

Thanks Seb.

The problem is that the rect object is a DomNode, not DomDocument. There is no CreateElement on DomNode. I need the title on the rect, is that possible?

Snorri.

[Snorri B.]

Sorry Seb, I have this working now so please ignore my last post.

Thanks a lot for your help!

Regards,
-Snorri

[Reuben B.]

I think you can also do it without having to expose the DomDocument by using the @chars keyword for both node and attribute name of the text node

Code (genero) Select Expand


DEFINE n,tn,tc omDomNode

    LET tn = n.createChild("title")
    LET tc = tn.createChild("@chars")
    CALL tc.setAttribute("@chars", "Hover Text")

[Snorri B.]

Thanks Seb. This works like a charm. No need to hack the library :)

Cheers,
-Snorri

[Sebastien F.]

Last suggestion was from Reuben ;-)
Seb

[Snorri B.]

Thanks Reuben!

And have a nice weekend y'all.


Regards,
-Snorri

[Sebastien F.]

Snorri,

You may also want to take a look at the demos we have on our Github:

https://github.com/FourjsGenero/fgl_svg_chart

Seb