How to create a v-tooltip on svg using vuetifyjs

Question

Here's a piece of my SVG:

<g id="g05">    
    <polygon class="st2" points="224.8,256.4 309.9,390.6 224.8,517.5 144.1,386.2" filter="url(#dropshadow)"/>   
    <defs>      
        <filter id="dropshadow">            
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>             
            <feOffset dx="3" dy="2"/>           
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.5"/>            
            </feComponentTransfer>          
            <feMerge> 
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>           
            </feMerge>      
         </filter>  
    </defs> 
</g>

And this is created <v-tooltip>:

<v-tooltip v-model="show" top color="cyan lighten-2">
    <v-btn icon slot="activator" fab large>
      <v-icon color="red darken-1">home</v-icon>
    </v-btn>
    <span class="display-2">Продвижение</span>
</v-tooltip>

How to create a v-tooltip on my svg? I'm trying to nest it into my v-tooltip but it doesn't seem to work.

Update: My SVG looks like this:

And when I hover a part of a SVG it has to show me a tooltip. A code of a part of a SVG file I shared at the top.

This might be related (using `foreignObject` to nest a div inside of an svg) https://stackoverflow.com/a/17596084/184746 — caesay, Jan 16 '18 at 19:41
I just looked at the docs for vuetify, it should work to wrap any element - if you want to wrap the whole SVG that should be possible ``. Is this not what you're trying to achieve? Can you update the question to be more clear about where the tooltip should be? — caesay, Jan 16 '18 at 19:47

score 0 · Answer 1 · edited Jul 16 '22 at 01:46

0

i think i had the same issue: i had to provide tooltips for single svg elements (path, circle, etc...) and solved it in a "hacky" way:

i settled the v-tooltip template as explained on the official documentation, but in a foreignObject tag

then moved the svg elements out of the foreignObject on tooltip mount

edited Jul 16 '22 at 01:46

tony19

125,647
18
229
307

answered Nov 17 '20 at 12:02

Daniele Fioroni

180
2
4

How to create a v-tooltip on svg using vuetifyjs

1 Answers1