[Solved] Advice on hover pop-up effects for graphic

[alston]

Hello,
I have a graph that I want/need/hope to put hover effects on so that when a site user hovers over a point/name there is a popup that gives information on this person. I’d like to be able to style the popups, so I believe that rules out using any tooltips.

I know this isn’t the easiest thing to do, but the options I have are either use a flat graphic and absolute-position any href’s over the image. Or, try to create this using absolute-positioned html with classes/id’s to target and style the popups.

I’ve also been looking for a flexible jquery plugin that may help me to style these differently. Ideally, within the popup, I’ll have either an h2 or h3, p tags, and href tags. Here is the graph that I am looking to add interactivity to. I am open to suggestions or advice.

Thanks.

click for image

[__]

it this “graph” an image? and if so, are the names/points part of the image, or are they HTML elements?

http://codepen.io/adrian-enspired/pen/dEqyr

a pure image would be much less convenient.

[alston]

Hello, thanks for your response.

Right now it could be a flat image with only tooltip markup, or, there is the option of using html elements. I’d prefer to not use html elements, but I can if need be.

But, I was hoping someone had some advice on how best to do this, with markup or without.

[__]

But, I was hoping someone had some advice on how best to do this, with markup or without.

Well, the “best” advice would depend on the details of your situation, which we don’t know. That’s why I asked a question, and why I can’t offer much more if you don’t answer it.

I’d prefer to not use html elements, but I can if need be.

Your OP mentioned that you wanted to have headings, paragraphs, and hyperlinks…?

[alston]

@Sudo make me a sandwich

I’m sorry but I don’t think you understood my response to your question.

There is an image, and I want to have hover points on it that can be styled. I know there are plugins that will alter the tool-tip state, and there are other ones that allow the use of h-tags, p-tags, etc.

I can go either way here, I’m just looking to see if someone else has done this and had some advice on it.

[alston]

@bearhead – thanks for the link, I’ll check it out. From your post that sounds like what I’m looking to do.

[Author]

Posts