Responsive Expense Chart using React

Community feedback

• 

  Rodrigo•480

  @RodrigoHLC

  Posted over 1 year ago

  I know there are a few ways to create the tooltip:

  • Some people will create a single <div> element set to opacity:0 and position: absolute, and use the "mouseover" eventListener to change the opacity to 1 (and "mouseout" to set it back to 0), and change its position and textContent depending on which bar you're hovering over.

  • I believe it's possible to create tooltips with only CSS using ::before and ::after, but I've never looked into it. Here's the tutorial: https://www.youtube.com/watch?v=ujlpzTyJp-M&ab_channel=WebDevSimplified

  • I created a <div class="tooltip"> after each <div class="bar"> on my graph (so, multiple tooltips), then changed the "order" property to have each .tooltip appear before each .bar (even if they're after the .bar in my html) and set opacity: 0. Then, since each .tooltip is still AFTER .bar on the html, you can use ".bar:hover + .tooltip {opacity: 1}", and everytime you hover over a .bar element, the .tooltip that's immediately after it in the html will have its opacity set to 1 (I used ".bar:hover ~ .tooltip {opacity: 1}" in my code, but "+" would have been more specific).

  Hope this helps!

  00