Could this be made to work with SVG embedded in the document?

[langalex]

No description provided.

[Shavindra]

I did a quick test with SVG. Seems not working. but may work with LESS/SASS?

Hint test: http://jsfiddle.net/shavindra/exULa/66/embedded/result/

Original ref: http://rod.vagg.org/2012/05/data-uri-svg/

[chinchang]

@langalex Do you want to show some SVG inside the tooltip as the above fiddle tries to do?

[langalex]

Sorry, no. I was talking about adding tooltips to SVG elements in the DOM, i.e. I have an SVG chart created with d3.js and when I hover over it I want to display some numbers.

[cvrebert]

http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg

[phette23]

has anyone been able to get hint.css working inside an embedded SVG? I'm having the exact same issue as @langalex: I'm using d3 and hints don't appear. The suggestions at @cvrebert's link don't work, either. Inside Chrome Devtools, I can see that the styles are applied if I use a <link> outside the SVG root, but the hints still don't work. I've tried adding pointer-events: all to elements too and that doesn't seem to help.

[taystack]

Drop your svg inside of a div. Tip the div.
On Feb 2, 2014 1:31 PM, "Eric Phetteplace" [email protected] wrote:

has anyone been able to get hint.css working inside an embedded SVG? I'm
having the exact same issue as @langalex https://github.com/langalex:
I'm using d3 and hints don't appear. The suggestions at @cvreberthttps://github.com/cvrebert's
link don't work, either. Inside Chrome Devtools, I can see that the styles
are applied if I use a outside the SVG root, but the hints still
don't work. I've tried adding pointer-events: all to elements too and
that doesn't seem to help.

Reply to this email directly or view it on GitHubhttps://github.com//issues/17#issuecomment-33913499
.

[phette23]

Thanks for the idea. It works but is too limited because the tip always appears outside the SVG canvas. I'm trying to do an SVG map with hints for each state/province and hints that appear far away from the :hover element aren't useful.

Before @taystack replied I made this minimal test case: http://jsfiddle.net/phette23/TkpS2/
Hover over the <rect>, nothing happens.

[taystack]

Don't know how your mapped out but if you want a specific hint you need to
grab it's pseudo :after and try for some absolute positioning hacks when
you hover a state. Your mouse events carry x and y coordinates. With some
jquery you could have the top follow your mouse. If you are good you could
abstract the tip content with jquery and only need one tip for all the
states.
On Feb 2, 2014 1:53 PM, "Eric Phetteplace" [email protected] wrote:

Thanks for the idea. It works but is too limited because the tip always
appears outside the SVG canvas. I'm trying to do an SVG map with hints for
each state/province and hints that appear far away from the :hoverelement aren't useful.

Before @taystack https://github.com/taystack replied I made this
minimal test case: http://jsfiddle.net/phette23/TkpS2/
Hover over the , nothing happens.

Reply to this email directly or view it on GitHubhttps://github.com//issues/17#issuecomment-33914213
.

[phette23]

Yeah, at that point I should just go with another solution. There are JavaScript-based d3 tooltip plugins, I just wanted to use hint.css. Trying it out, I had no idea svg elements don't support :before and :after pseudoelements. Seems like this issue should be closed; fixing it would involve completely restructuring the project.

[taystack]

Honestly, you could knock it out with 3 lines of JavaScript, one line of
CSS and one HTML element. Let me get on your fiddle. I'm mobile right now
so it will be a few (measurement of time) before I can code it.
On Feb 2, 2014 2:28 PM, "Eric Phetteplace" [email protected] wrote:

Yeah, at that point I should just go with another solution. There are
JavaScript-based d3 tooltip plugins, I just wanted to use hint.css. Trying
it out, I had no idea svg elements don't support :before and :afterpseudoelements. Seems like this issue should be closed; fixing it would
involve completely restructuring the project.

Reply to this email directly or view it on GitHubhttps://github.com//issues/17#issuecomment-33915306
.

[taystack]

So here is a link to some code you might find useful. It is pretty much a
tiny custom hint library using js and jquery. Forgive me for assuming that
you are using jquery but these things can also be accomplished without if
you know how to use the window and document.

http://jsfiddle.net/bt7wB/1/

On Sun, Feb 2, 2014 at 2:47 PM, T Stack [email protected] wrote:

Honestly, you could knock it out with 3 lines of JavaScript, one line of
CSS and one HTML element. Let me get on your fiddle. I'm mobile right now
so it will be a few (measurement of time) before I can code it.
On Feb 2, 2014 2:28 PM, "Eric Phetteplace" [email protected]
wrote:

Yeah, at that point I should just go with another solution. There are
JavaScript-based d3 tooltip plugins, I just wanted to use hint.css. Trying
it out, I had no idea svg elements don't support :before and :afterpseudoelements. Seems like this issue should be closed; fixing it would
involve completely restructuring the project.

Reply to this email directly or view it on GitHubhttps://github.com//issues/17#issuecomment-33915306
.

[phette23]

Yup, I basically mimicked your example but with D3. D3 replicates a lot of jQuery's (event listeners, selection, chaining) so it's not necessary to use both.

If anyone comes across this & is curious, here's the approach I took.