Hover on different div outside graphic

[NopelTG]

I have a graph bar, when hovering I want some data to be displayed, but I can’t make it happen.

When hovering eg. first blue I want to display text in HiddenBox1, first green other and so …
When hovering bar is changing to orange to see that is the hovered bar.

Code is here:
https://codepen.io/LucBaetsle/pen/GdapJK

Thanks in advance

[Beverleyh]

Unfortunately there’s too much code in the demo to expect folks here to comfortably view and troubleshoot, and on quick inspection, I don’t see anything that would suggest you’ve attempted to do anything with the hover boxes yourself.

To attract helpful responses you can do two things;

1. Strip back the demo to something much more basic – one or two bars, minus all the extra visual fluff. We only need a very simplified codebase of HTML and CSS – get rid of superfluous styling – solid, basic blocks and standard fonts are fine.

2. Show us what you’ve tried already in CSS or JavaScript.

You should also check the forums for previous, similar questions and answers. Only yesterday there was a thread asking about showing and hiding docs on hover so you may find what you’re looking for there.

[JeroenR]

With the current HTML structure you can’t achieve something like this with just CSS. If you want to do it with CSS only, then you’ll have to move the hidden DIV’s to somewhere in the ancestor structure of the items you’re hovering.
Leaving the structure like it is now, you can do something with javascript (I’ve added jQuery) and then you can do something like this: https://codepen.io/jeroenreijs/pen/ELzwRv

The hovering is causing some flickering, you can solve that by changing the CSS, but I think you’ll get the idea by this.

[NopelTG]

I adjusted the JQuery a bit, but I only get the data that comes above the bar into the HiddenBox below.
When I enter other data; I’m not able to see.

https://codepen.io/LucBaetsle/pen/GdapJK

It displays Luc or Karl in the colored bar, but not in yellow box below

[JeroenR]

In your codepen, jQuery is not included, so that raises an error.
Second, the p element is set to display: none;, line 353 in your CSS. So actually when jQuery has been included, the thing works, you just won’t see it because of the CSS.

[NopelTG]

JeroenR:

When I click “Edit on CodePen”. I can see code in JQuery. When I remove p {display … then the both names are visual fr om the beginning.

GreetZ

[Beverleyh]

You need to include the jQuery library too… in the pen’s JS settings.

[NopelTG]

I included the library into HTML. But still showing the data, like Luc and Karl on the bar and not in the yellow box.
If I remove p {display .. then I get Luc and Karl into the bar and in the yellow box together with the data.

I only want Luc, Karl in the yellow box and not the value when hovering the bar

https://codepen.io/LucBaetsle/pen/GdapJK

[JeroenR]

When you want all paragraphs to hide, but one, it is useful to use a classname to override the display: none;.
So I have used a classname ‘show’, to show a paragraph which uses that classname.

Also, at first we took the whole textual value of the listitem, but if you only want the name, you can search for the paragraph inside that list item and just take that value.
These are the two changes I’ve made:

https://codepen.io/anon/pen/aKodWQ

I think this is what you want to have?

[NopelTG]

JeroenR, yes, this is it. It works fine within CodePen. But why doesn’t the hoverbox show up when I put files into the website. I entered also following in html page

script type=”text/javascript” src=”BarGraph.js”

[JeroenR]

I’m not sure. It’s impossible to guess. But when you have put the script of the codepen in the file BarGraph.js, make sure you load jQuery as well in your website and before the BarGraph.
Also, check if the reference to that javascript file is right, follow the link to it and see if it doesn’t reach a 404 or something.
Because usually you place your script files in another directory than your pages. Not necessary, just a way of working.

[Author]

Posts