Awesome – how to get SVG tooltips working?

  • Love it … but unfortunately none of my tooltips work anymore (defined within the SVG using <title>[tooltip content]</title>). Normally they pop up with a mouseover.

    To be honest I’d like to actually target these tooltips from outside the SVG (have them 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.

    Suggestions anyone? See example below for my file text.svg.
    How do i get the tooltips (“Tooltip1” and “Tooltip2”) to show up in another div container?

    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>
    • This topic was modified 7 years, 2 months ago by lullabyman.
    • This topic was modified 7 years, 2 months ago by lullabyman.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi @lullabyman,

    Thanks for your kind review!

    Could you please open a support ticket so we can discuss your situation further rather than on a review thread?

    Thread Starter lullabyman

    (@lullabyman)

    Okey dokey. support ticket: https://www.ads-software.com/support/topic/need-tooltips-visible-from-the-svg-title-tags/

    Thread Starter lullabyman

    (@lullabyman)

    FYI, for others who might run into this problem, you have to do 3 things:
    (1) Use inline SVG, just select this option in the settings panel
    (2) Use the “style-svg” class, just select this option in the settings panel
    (3) *Delete* the title that is wordpress so kindly automatically creates for you when you upload your SVG using the library. This is what I wasn’t doing. See
    https://drive.google.com/file/d/0B3dbrj98d4NEem1sekp2al82bUk/view?usp=sharing
    This needs to be blank.

    Thanks again BenBodhi for an awesome plugin!

    Plugin Author Benbodhi

    (@benbodhi)

    Thanks for updating this thread ??
    But you shouldn’t need to remove the title of the uploaded SVG, I didn’t and it works fine.
    You simply need to render it inline which requires “Advanced Mode” to be active and then you to put the class in your embedded img tag so my plugin swaps the <img> tag with the inline <svg> code.

    Thanks for your support and using my plugin ??

    Thread Starter lullabyman

    (@lullabyman)

    Okay. I’m thinking now what really did it is forcing the svg class, which I didn’t include in the above instructions.

    Incidentally, at least for me, I was really confused where to select the options in the setting panel for assigning the style-svg class and forcing it, which your documentation mentions. It wasn’t until I went back to the settings after I saved the advanced mode settings that I discovered these other options, and then untoggled the Advanced option to see them disappear again after I saved the non-advanced settings.

    So at least for me, would have saved headache if those other settings didn’t disappear entirely when the advanced settings wasn’t saved. If they were just grayed out when not available, or make them appear when the advanced settings checkbox is selected (ajaxian like), if that makes sense, would have saved me a lot of confusion. But then I seem to be a real good test case how idiots tend to approach things … so maybe I’m the only one that would mess up.

    Plugin Author Benbodhi

    (@benbodhi)

    Hahaha, I know what you mean. I have been thinking about “ajaxifying” the settings to be honest. I’ve never really had any other mentions of this, but it’s something I want to do anyway to make for a cleaner interface.

    Thanks for the suggestion. I’m actively working on another release so will take his on board.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Awesome – how to get SVG tooltips working?’ is closed to new replies.