Tooltips for cells in HTML table no Javascript

Question

Is it possible to have tooltips for table cells with no JavaScript   Can t use it

User · Answer

Yes  You can use the title attribute on cell elements  with poor usability  or you can use CSS tooltips  several existing questions  possibly duplicates of this one

User · Answer

if  data j     B        row cells j  title  Basic       In Java script conditionally adding title by comparing value of Data  The Table is generated by Java script dynamically

User · Answer

You can use css and the  hover pseudo-property  Here is a simple demo  It uses the following css   a span tooltip  display none   a hover span tooltip  position absolute top 30px left 20px display inline border 2px solid green     Note that older browsers have limited support for  hover

User · Answer

have you tried    lt td title  This is Title  gt    its working fine here on Firefox v 18  Aurora   Internet Explorer 8  amp  Google Chrome v 23x

User · Answer

The highest-ranked answer by Mudassar Bashir using the  title  attribute seems the easiest way to do this  but it gives you less control over how the comment tooltip is displayed   I found that The answer by Christophe for a custom tooltip class seems to give much more control over the behavior of the comment tooltip   Since the provided demo does not include a table  as per the question  here is a demo that includes a table     Note that the  position  style for the parent element of the span  a  in this case   must be set to  relative  so that the comment does not push the table contents around when it is displayed  It took me a little while to figure that out    x000D   x000D   MyTable  x000D    border-style solid  x000D    border-color black  x000D    border-width 2px x000D    x000D   x000D   MyTable td  x000D    border-style solid  x000D    border-color black  x000D    border-width 1px  x000D    padding 3px  x000D    x000D   x000D   CellWithComment  x000D    position relative  x000D    x000D   x000D   CellComment  x000D    display none  x000D    position absolute   x000D    z-index 100  x000D    border 1px  x000D    background-color white  x000D    border-style solid  x000D    border-width 1px  x000D    border-color red  x000D    padding 3px  x000D    color red   x000D    top 20px   x000D    left 20px  x000D    x000D   x000D   CellWithComment hover span CellComment  x000D    display block  x000D    x000D   lt table id  MyTable  gt  x000D     lt caption gt Cell 1 2 Has a Comment lt  caption gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt td gt Heading 1 lt  td gt  x000D         lt td gt Heading 2 lt  td gt  x000D         lt td gt Heading 3 lt  td gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  lt  tr gt  x000D         lt td gt Cell 1 1 lt  td gt  x000D         lt td class  CellWithComment  gt Cell 1 2 x000D           lt span class  CellComment  gt Here is a comment lt  span gt  x000D         lt  td gt  x000D         lt td gt Cell 1 3 lt  td gt  x000D       lt tr gt  x000D         lt td gt Cell 2 1 lt  td gt  x000D         lt td gt Cell 2 2 lt  td gt  x000D         lt td gt Cell 2 3 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

An evolution of what BioData41 added     Place what follows in CSS style        lt style gt            CellWithComment position relative             CellComment                       visibility  hidden              width  auto              position absolute               z-index 100              text-align  Left              opacity  0 4              transition  opacity 2s              border-radius  6px              background-color   555              padding 3px              top -30px               left 0px                        CellWithComment hover span CellComment  visibility  visible opacity  1    lt  style gt    Then  use it like this            lt table gt               lt tr gt                   lt th class  CellWithComment  gt Category lt span class  CellComment  gt  Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo  lt  span gt  lt  th gt                   lt th class  CellWithComment  gt Code lt span class  CellComment  gt  Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo  lt  span gt  lt  th gt                   lt th gt Opened lt  th gt                   lt th gt Event lt  th gt                   lt th gt Severity lt  th gt                              lt th gt Id lt  th gt                   lt th gt Component Name lt  th gt               lt  tr gt               lt tr gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt               lt  tr gt               lt tr gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt                   lt td gt Table cell lt  td gt               lt  tr gt           lt  table gt

[javascript] Tooltips for cells in HTML table (no Javascript)

Examples related to javascript

Examples related to html-table