Four Js Development Tools Forum

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

<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

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:

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

Then you can build the title node as follows:

    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

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.

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

Thanks a lot for your help!

Regards,
-Snorri

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

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

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

Cheers,
-Snorri

Last suggestion was from Reuben ;-)
Seb

Thanks Reuben!

And have a nice weekend y'all.


Regards,
-Snorri

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