Need Tooltips visible from the svg title tags

Resolved lullabyman
(@lullabyman)

4 years, 8 months ago
None of my tooltips work using this plugin (defined within the SVG using <title>[tooltip content]</title>). Normally they pop up with a mouseover.

To be honest I’d like these tooltips to pop up in a separate div, and with this plugin’s “advanced” setting that looks possible. But as a n00b I have no idea how to do that. See example below for my file text.svg. How do i get the tooltips (“Tooltip1” and “Tooltip2”) to show up in another div container? See ps below.

But that’s really a side issue regarding SVG tootip capability of this plugin (I just think it’s how tooltips should work best anyway).

Thx in advance!
– Dave
```
<svg id="svg1";>
  <text id="text1" x="30"; y="30";>
    <title>
      Tooltip1
    </title>
    <tspan id="tspan1" x="30"; y="30";>Text1</tspan>
  </text>
  <text id="text2" x="30"; y="60";>
    <title>
      Tooltip2
    </title>
    <tspan id="tspan2"  x="30"; y="60">Text2</tspan>
    </text>
</svg>
```
The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Benbodhi
(@benbodhi)

4 years, 8 months ago

Hi,

Thanks for opening a support thread 🙂

I’m a little confused why you’re trying to use SVG format for this…

Maybe you could provide a bit more context please?

I saved this code as a standard SVG file, but it has no data for shapes so I can’t actually see anything.

Thread Starter lullabyman
(@lullabyman)

4 years, 8 months ago

If you save it as an SVG and drop it in a browser window, then hover over the texts “Text1” and “Text2” the tooltips will appear. They won’t if using this plugin.

>Why you’re trying to use SVG format for this…

Because it’s animated. The actual SVG I’m using is this one:
http://immersionmax.com/wp-content/uploads/2017/09/Benefits-Diagram_animated-fin.svg

Thanks!

Plugin Author Benbodhi
(@benbodhi)

4 years, 8 months ago

Thanks for providing that.

I just tested your SVG and it works fine, tooltips and all. See screenshot:
https://www.dropbox.com/s/kqj5jbrxyvyfyns/Screenshot%202017-09-06%2016.56.54.png?dl=0

Plugin Author Benbodhi
(@benbodhi)

4 years, 8 months ago

I should add that you need to make sure that your SVG is rendered inline.
It won’t work if you use it like a standard image.

To render it inline, make sure the “Advanced Mode” is on in SVG Support settings and add class="style-svg" to the image tag to have my plugin render it inline 🙂

Let me know how you go.

Thread Starter lullabyman
(@lullabyman)

4 years, 8 months ago

Interesting. After seeing your post I installed a fresh wordpress instance on a domain I wasn’t already using, installed SVG Support, and nothing else. Then uploaded the graphic. Here it is:
http://sproutbook.com/benefits-diagram_animated-fin/

At least for me tooltips don’t work, on any browser or machine that I try. They do however if I right-click and open image in new window (so it’s viewing the raw SVG directly).

Thread Starter lullabyman
(@lullabyman)

4 years, 8 months ago

>add class=”style-svg”

D’oh … okay I’ll try that. I already did once, but I’ll try it again.

Plugin Author Benbodhi
(@benbodhi)

4 years, 8 months ago

Yeah, that still isn’t rendered inline in that post. You definitely need to render the actual SVG code using the class method.
You can also force all SVG files to be rendered inline since version 2.3.11 🙂

Thread Starter lullabyman
(@lullabyman)

4 years, 8 months ago

Okay, figured out why that didn’t work the first time I tried that. When using the library to upload the SVG wordpress automatically assigns a title to the image based on the filename. See
https://drive.google.com/file/d/0B3dbrj98d4NEem1sekp2al82bUk/view?usp=sharing

If you leave that there the svg title will conflict with any title tooltips originating from within the SVG. All I did was delete the title and it worked great. Thanks!

I still would like to show those titles in another DIV outside the SVG container, but I’ll do some more scouring to try and figure that out.

Plugin Author Benbodhi
(@benbodhi)

4 years, 8 months ago

Glad you got it sorted.
The title on the image in the media library shouldn’t affect it. Mine works fine with the title in there as it’s completely ignored when you render the SVG code inline.
Nonetheless, it’s working for you.

Tooltips can be a pain, I would create divs that hold the content and have them display: none; until you hover the correct trigger item. This would require some fancy CSS and/or jQuery. There’s a lot of ways to do that stuff, you should find some good info on stackexchange.

All the best.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Need Tooltips visible from the svg title tags’ is closed to new replies.

Views