Adding title (or hover info) to svg element

Learn
1

I’ve got an application where I’m rendering a lot of Svgs.
On one specific I want to have display on hover info. Using title attribute won’t do it on svgs. A trick is to use <title> (SVG Title vs. HTML Title Attribute | CSS-Tricks - CSS-Tricks), but elm doesn’t allow <title>, since I guess its a head.

Trying to add the hoverInfo on the image.

iconSvg : Float -> Float -> String -> Svg msg
iconSvg width height path = 
TSvg.svg
  [ TSvgA.viewBox 0 0 64 64
  , InPx.width width
  , InPx.height height
  ]
  [ TSvg.image [ TSvgA.href path ] [] ]

The rendering function

(...)
    [ TSvg.g
        [ [ TSvgTypes.Translate x y ] |> TSvgA.transform
        , TSvgA.class [ "testElement" ]
        ]
        [ iconSvg, hoverInfo ]
    ]

Any suggestions on workarounds for this?

2

This seems to work :slight_smile:

Svg.text_ 
  [ ]
  [ Svg.title [] [ Svg.text "This works" ]
  , Svg.text "Hover me"
  ]

Ellie: https://ellie-app.com/pY5v9TDDJs5a1

3

Ah! Thanks!
Do you have any tip on adding this to an area?
Tried baking in a SVG object within the Svg.text_ but that did not do it.

4

The Svg.title tag seems to work directly on other shapes like rect as well.
Updated the example to hover on a box instead of text here:
https://ellie-app.com/pYzCrWmSQFBa1

5

Yes thanks! I had put the Svg.attribute width on the rect instead of the Svg holding the rect and text.
There is something odd within the app that I’m working on, the title only appear once. Then I have to click on something and hover again for it to work. But it works! Thanks!