Change CSS of another div when hover on Table cell

Question

I have seen similar post on stack exchange where you can change css of another div when hovered over one div. However in my case it is not working as I am using this with a table cell.

Here, is the HTML code:

 body { padding: 5%; } .tbdata { background-color: royalblue; color: white; cursor: pointer; } .tooltip { color: white; opacity: 0; transition: opacity 1s; background-color: red; min-width: 50px; min-height: 100px; } .tbdata:hover ~ .tooltip { opacity: 1; } .tbdata:hover ~ .tooltip:after { content: attr(data-); } 

 <table> <tr> <td class="tbdata" data-="This is the tooltip text for col1">This is table data1</td> <td class="tbdata" data-="This is the tooltip text for col2">This is table data2</td> </tr> </table> <div class="tooltip"> </div> 

I want to make the .tooltip div visible when hovered over the .tbdata and also change the content using attr() from the table cell.

Please suggest.

Answer 1

You cannot change the content property dynamically on hover, however, you can use some "trickery" to hide a span and show another.

This example below shows how you can do just that. This, as far as I know, is the best solution for a non-JS implementation of dynamically changing a div content on hover

 .button{ background:lightblue; width:200px; } .tooltip{ background:red; width:200px; } .tooltip .before { display: block; } .tooltip .after { display: none; } .button:hover .tooltip{ background:green; } /* Hide the `.before` and show the `.after` */ .button:hover .tooltip .before{ display:none; } .button:hover .tooltip .after { display:block; } 

 <div class="button"> Hover over me! <div class="tooltip"><span class="before">Turn nothing</span><span class="after">Into something</span></div> </div> 

To hide/show the content, you would also apply display property changes to the .tooltip . I've left both div visible for this demonstration, however, to show the changing content.

Answer 2

I used Jquery for this solution.

  $('document').ready(function(){



  $('.tbdata').hover(
  function(){

        $(".tooltip").css("visibility","visible");
        $(".tooltip").attr("attrname","attrvalue"); //attribute
  },
  function(){

        $(".tooltip").css("visibility","hidden");
        $(".tooltip").attr("attrname","attrvalue"); //attribute

  }

  );

});

Here is example: Fiddle