Tooltip with HTML content without JavaScript

Question

There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page  Some are rather plain  some allow the tooltip to display HTML content styled with CSS   But is there a way to show a styled tooltip without using JavaScript  If you just use the title attribute  tags are not processed  e g  foo lt br   gt bar doesn t produce a line break   I m looking for a solution that allows one to display styled HTML content without using any JavaScript

User · Answer

Pure CSS    x000D   x000D   app-tooltip   x000D    position  relative  x000D    x000D   x000D   app-tooltip before   x000D    content  attr data-title   x000D    background-color  rgba 97  97  97  0 9   x000D    color   fff  x000D    font-size  12px  x000D    padding  10px  x000D    position  absolute  x000D    bottom  -50px  x000D    opacity  0  x000D    transition  all 0 4s ease  x000D    font-weight  500  x000D    z-index  2  x000D    x000D   x000D   app-tooltip after   x000D    content      x000D    position  absolute  x000D    opacity  0  x000D    left  5px  x000D    bottom  -16px  x000D    border-style  solid  x000D    border-width  0 10px 10px 10px  x000D    border-color  transparent transparent rgba 97  97  97  0 9  transparent  x000D    transition  all 0 4s ease  x000D    x000D   x000D   app-tooltip hover after  x000D   app-tooltip hover before   x000D    opacity  1  x000D    x000D   lt div href     class  app-tooltip  data-title  Your message here  gt  Test here lt  div gt  x000D   x000D   x000D

User · Answer

Similar to koningdavid s  but works on display none and block  and adds additional styling    x000D   x000D  div tooltip   x000D    position  relative  x000D        DO NOT include below two lines  as they were added so that the text that x000D          is hovered over is offset from top of page   x000D    top  10em  x000D    left  10em  x000D       if want hover over icon instead of text based  uncomment below    x000D          background-image  url     images info tooltip svg    x000D                  width and height of svg     x000D              width  16px  x000D              height  16px    x000D    x000D   x000D   x000D     hide tooltip    x000D   x000D  div tooltip span   x000D    display  none  x000D    x000D   x000D   x000D     show and style tooltip    x000D   x000D  div tooltip hover span   x000D       show tooltip    x000D    display  block  x000D       position relative to container div tooltip    x000D    position  absolute  x000D    bottom  1em  x000D       prettify    x000D    padding  0 5em  x000D    color   000000  x000D    background   ebf4fb  x000D    border  0 1em solid  b7ddf2  x000D       round the corners    x000D    border-radius  0 5em  x000D       prevent too wide tooltip    x000D    max-width  10em  x000D    x000D   lt div class  tooltip  gt  x000D    hover over me x000D     lt span gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Donec quis purus dui  Sed at orci   lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using the title attribute    x000D   x000D   lt a href     title  Tooltip here  gt Link lt  a gt  x000D   x000D   x000D

User · Answer

This is my solution for this   https   gist github com BryanMoslo 808f7acb1dafcd049a1aebbeef8c2755  The element recibes a  tooltip-title  attribute with the tooltip text and it is displayed with CSS on hover  I prefer this solution because I don t have to include the tooltip text as a HTML element     HTML  lt button class  tooltip  tooltip-title  Save  gt Hover over me lt  button gt    CSS  body      padding  50px     tooltip       position  relative      tooltip before       content  attr tooltip-title       min-width  54px      background-color   999999      color   fff      font-size  12px      border-radius  4px      padding  9px 0      position  absolute      top  -42px      left  50       margin-left  -27px      visibility  hidden      opacity  0      transition  opacity 0 3s      tooltip after       content          position  absolute      top  -9px      left  50       margin-left  -5px      border-width  5px      border-style  solid      border-color   999999 transparent transparent      visibility  hidden      opacity  0      transition  opacity 0 3s      tooltip hover before   tooltip hover after      visibility  visible      opacity  1

User · Answer

I have made a little example using css   x000D   x000D   hover   x000D    position  relative  x000D    top  50px  x000D    left  50px  x000D    x000D   x000D   tooltip   x000D       hide and position tooltip    x000D    top  -10px  x000D    background-color  black  x000D    color  white  x000D    border-radius  5px  x000D    opacity  0  x000D    position  absolute  x000D    -webkit-transition  opacity 0 5s  x000D    -moz-transition  opacity 0 5s  x000D    -ms-transition  opacity 0 5s  x000D    -o-transition  opacity 0 5s  x000D    transition  opacity 0 5s  x000D    x000D   x000D   hover hover  tooltip   x000D       display tooltip on hover    x000D    opacity  1  x000D    x000D   lt div class  hover  gt hover x000D     lt div class  tooltip  gt asdadasd x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    FIDDLE  http   jsfiddle net 8gC3D 471

User · Answer

You can use the title attribute  e g  if you want to have a Tooltip over a text  just make    x000D   x000D   lt span title  This is a Tooltip  gt This is a text lt  span gt  x000D   x000D   x000D

User · Answer

This one is very interesting       HTML and CSS only    x000D   x000D   help-tip   x000D    position  absolute  x000D    top  18px  x000D    left  18px  x000D    text-align  center  x000D    background-color   BCDBEA  x000D    border-radius  50   x000D    width  24px  x000D    height  24px  x000D    font-size  14px  x000D    line-height  26px  x000D    cursor  default  x000D    x000D   x000D   help-tip before   x000D    content       x000D    font-weight  bold  x000D    color   fff  x000D    x000D   x000D   help-tip hover span   x000D    display  block  x000D    transform-origin  100  0   x000D    -webkit-animation  fadeIn 0 3s ease-in-out  x000D    animation  fadeIn 0 3s ease-in-out  x000D    x000D   x000D   help-tip span   x000D    display  none  x000D    text-align  left  x000D    background-color   1E2021  x000D    padding  5px  x000D    width  200px  x000D    position  absolute  x000D    border-radius  3px  x000D    box-shadow  1px 1px 1px rgba 0  0  0  0 2   x000D    left  -4px  x000D    color   FFF  x000D    font-size  13px  x000D    line-height  1 4  x000D    x000D   x000D   help-tip span before   x000D    position  absolute  x000D    content      x000D    width  0  x000D    height  0  x000D    border  6px solid transparent  x000D    border-bottom-color   1E2021  x000D    left  10px  x000D    top  -12px  x000D    x000D   x000D   help-tip span after   x000D    width  100   x000D    height  40px  x000D    content      x000D    position  absolute  x000D    top  -40px  x000D    left  0  x000D    x000D   lt span class  help-tip  gt  x000D        lt span  gt  This is the inline help tip   lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

Another similar way to do it by css    x000D   x000D   img      x000D   img hover  visibility hidden  x000D   thistext  font-size 22px color white   x000D   thistext hover  color black   x000D   hoverme  width 50px height 50px   x000D   x000D   hoverme hover    x000D  background-color green  x000D  position absolute   x000D  left 300px  x000D  top 100px  x000D  width 40   x000D  height 20   x000D    x000D   lt p id  hoverme  gt  lt img id  img  src  http   a deviantart net avatars l o lol-cat jpg  gt  lt  img gt  lt span id  thistext  gt LOCATZ     lt  span gt  lt  p gt  x000D   x000D   x000D    Try it  http   jsfiddle net FdBu7   And here is some links about transitions and new ways to do it   http   www w3schools com css3 css3 transitions asp http   dev opera com articles view css3-show-and-hide

[html] Tooltip with HTML content without JavaScript

Examples related to html

Examples related to css

Examples related to tooltip