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<br />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.

@Nile: It doesn't work. For example, if I put the "
" tag, the tooltip shows "foo
bar", you know what I mean? — gaetanm, Jun 30 '13 at 14:16
I can't see the point in the down-votes either. And why is this closed? Isn't HTML and CSS code? I came here from google thinking "lol, that can't be done mate.." - but apparently I was wrong. :) — Kenneth_hj, Sep 15 '13 at 06:35
This is definitely a question about programming - in fact, I'm surprised not more people are doing it this way: elegant CSS using `:hover`, instead of adding yet another JavaScript library to the growing pile... should be re-opened. +1 from me to offset the down-votes by people who (I can only imagine) don't get the question. — Amos M. Carpenter, Nov 20 '13 at 07:45
[This video](https://www.youtube.com/watch?v=hAeQ8CqrGDY) explains nicely how to do it. — J0ANMM, Jan 10 '17 at 10:36

score 79 · Accepted Answer · edited Oct 22 '18 at 14:33

79

I have made a little example using css

.hover {
  position: relative;
  top: 50px;
  left: 50px;
}

.tooltip {
  /* hide and position tooltip */
  top: -10px;
  background-color: black;
  color: white;
  border-radius: 5px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.hover:hover .tooltip {
  /* display tooltip on hover */
  opacity: 1;
}

<div class="hover">hover
  <div class="tooltip">asdadasd
  </div>
</div>

FIDDLE

http://jsfiddle.net/8gC3D/471/

edited Oct 22 '18 at 14:33

Andrzej Ziółek

2,212
1
12
21

answered Jun 30 '13 at 14:14

koningdavid

7,531
5
33
46

2

Please add the code in your answer. Fiddle's are always good to *demonstrate* the results. – HamZa Jun 30 '13 at 14:17
Perfect, it's exactly what I wanted! Thanks! – gaetanm Jun 30 '13 at 14:27
3

This doesn't work very well. If you hover `.tooltip` without hovering `.hover` the tooltip will come up. Therefore I suggested add `visibility: hidden/visible` to avoid this. – pzin Jun 30 '13 at 15:12
@pzin Thanks for your suggestion, it's added – koningdavid Jun 30 '13 at 15:25
Wait, is this really possible?? I was expecting a bunch of "nope, you can't" answers when I came from google, but instead I got wiser. Thank you sir koningdavid. :) Which version of HTML/CSS is this? Only CSS3 or have it been around for ages? Any downsides to this compared to Javascript/JQuery? – Kenneth_hj Sep 15 '13 at 06:53
1

@Kenneth_hj Hi Kenneth, the transition effect is CSS3, in older browser it will work, just without the transition! – koningdavid Sep 15 '13 at 15:26
@pzin How could hovering tooltip make the tooltip to appear? The CSS rule is: .hover:hover .tooltip, so it's /hover/ that must be hovered. – Lukasz Czerwinski Nov 28 '13 at 17:04
Apart from that, when you add visibility, the tooltip stops working on Chrome on Win 7 (I didn't check other browsers). – Lukasz Czerwinski Nov 28 '13 at 17:05
@LukaszCzerwinski if you hover a child then the parent is hovered too. In this case the child was outside the parent, but it's still its child. Setting just an `opacity` will not make the child to disappear (and you could hover it) like `visibility` does. – pzin Nov 29 '13 at 07:38
@LukaszCzerwinski that's because of trying to animate everything instead of just animate `opacity`: http://jsfiddle.net/8gC3D/412 – pzin Nov 29 '13 at 07:39
1

I see... thank you for explaining. But anyway, rules with `visibility` didn't work for me on Chrome Win7... – Lukasz Czerwinski Dec 04 '13 at 20:58
1

@LukaszCzerwinski Yep, I noticed that, it used to work but no longer does! I removed visibility, thanks for you suggestion – koningdavid Dec 04 '13 at 21:18
It is really great. Thanks – Harry Sarshogh May 10 '14 at 07:13
Nice, but how can we exclude .tooltip from the hover area of .hover? – Yevgeniy Oct 09 '14 at 20:53
1

I've been using this for a while - still think it's a very elegant solution - but came across an issue with handling overlapping tooltips today, so posted a [new question](http://stackoverflow.com/questions/34258565/css-tooltip-issue-with-overlapping-tooltips). – Amos M. Carpenter Dec 14 '15 at 02:47
1

Update: found [a solution](http://stackoverflow.com/a/34259217/983430) that solves my issue - use both `opacity` and `visibility`. – Amos M. Carpenter Dec 14 '15 at 03:14
As @AmosM.Carpenter pointed, you need to add: `visibility: hidden;` to `.tooltip` class and `visibility: visible;` to `.hover:hover .tooltip` class. Otherwise the tooltip will show up when you hover `.hover` but also when you hover `.tooltip` which will cause an unwanted behaviour (specially if your tooltip area isn't small) – achasinh Jun 23 '17 at 10:38
I don't see how this answer addresses the OP's question - I was expecting to see a tooltip that _contained_ HTML. The answer uses CSS to style the tooltip's appearance in it's entirety, but you couldn't have (for example) tables, images, hyperlinks, individual words bold-face etc. – rossmcm Nov 03 '18 at 22:13

score 15 · Answer 2 · edited Jul 08 '19 at 14:41

15

Using the title attribute:

<a href="#" title="Tooltip here">Link</a>

edited Jul 08 '19 at 14:41

husayt

13,559
7
48
77

answered Jun 30 '13 at 14:12

heytools

726
3
16

20

Nice idea, but it'll only hold text, not html content like OP wants. – dsgriffin Jun 30 '13 at 14:14
There's also a long pause between when you hover, and when the content appears. I think a lot of people will move on before it appears, because they don't know to wait. – Ian Dunn Dec 01 '20 at 19:19

score 10 · Answer 3 · edited Oct 22 '18 at 14:33

Similar to koningdavid's, but works on display:none and block, and adds additional styling.

div.tooltip {
  position: relative;
  /*  DO NOT include below two lines, as they were added so that the text that
        is hovered over is offset from top of page*/
  top: 10em;
  left: 10em;
  /* if want hover over icon instead of text based, uncomment below */
  /*    background-image: url("../images/info_tooltip.svg");
            /!* width and height of svg *!/
            width: 16px;
            height: 16px;*/
}


/* hide tooltip */

div.tooltip span {
  display: none;
}


/* show and style tooltip */

div.tooltip:hover span {
  /* show tooltip */
  display: block;
  /* position relative to container div.tooltip */
  position: absolute;
  bottom: 1em;
  /* prettify */
  padding: 0.5em;
  color: #000000;
  background: #ebf4fb;
  border: 0.1em solid #b7ddf2;
  /* round the corners */
  border-radius: 0.5em;
  /* prevent too wide tooltip */
  max-width: 10em;
}

<div class="tooltip">
  hover_over_me
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>

Good point that you switched from `opacity:0` to `display:none` . Otherwise, you get the strange effect of seeing the tooltip when hovering around the element, as you are hovering on the tooltip, even if this is not visible. — J0ANMM, Jan 10 '17 at 12:01

score 8 · Answer 4 · edited Oct 22 '18 at 14:33

This one is very interesting,

HTML and CSS only

.help-tip {
  position: absolute;
  top: 18px;
  left: 18px;
  text-align: center;
  background-color: #BCDBEA;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 26px;
  cursor: default;
}

.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #fff;
}

.help-tip:hover span {
  display: block;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: fadeIn 0.3s ease-in-out;
}

.help-tip span {
  display: none;
  text-align: left;
  background-color: #1E2021;
  padding: 5px;
  width: 200px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  left: -4px;
  color: #FFF;
  font-size: 13px;
  line-height: 1.4;
}

.help-tip span:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1E2021;
  left: 10px;
  top: -12px;
}

.help-tip span:after {
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
}

<span class="help-tip">
     <span > This is the inline help tip! </span>
</span>

score 6 · Answer 5 · edited Oct 22 '18 at 14:33

6

Pure CSS:

.app-tooltip {
  position: relative;
}

.app-tooltip:before {
  content: attr(data-title);
  background-color: rgba(97, 97, 97, 0.9);
  color: #fff;
  font-size: 12px;
  padding: 10px;
  position: absolute;
  bottom: -50px;
  opacity: 0;
  transition: all 0.4s ease;
  font-weight: 500;
  z-index: 2;
}

.app-tooltip:after {
  content: '';
  position: absolute;
  opacity: 0;
  left: 5px;
  bottom: -16px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
  transition: all 0.4s ease;
}

.app-tooltip:hover:after,
.app-tooltip:hover:before {
  opacity: 1;
}

<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>

edited Oct 22 '18 at 14:33

Andrzej Ziółek

2,212
1
12
21

answered Mar 21 '18 at 16:56

Marina

1,536
1
17
21

very clever: content: attr(data-title); – Otávio Décio Jun 01 '18 at 23:49
Question is about showing HTML content in tooltip; your answer shows textual content. – Sridhar Ratnakumar Oct 24 '20 at 03:51

score 2 · Answer 6 · edited Jul 08 '19 at 14:45

Another similar way to do it by css:

#img {  }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}

#hoverme:hover { 
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}

<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>

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/

It doesn't work well on Chrome/Win7 - the images are blinking/flipping — Lukasz Czerwinski, Nov 28 '13 at 17:07

score 1 · Answer 7 · edited Jul 08 '19 at 14:41

1

You can use the title attribute, e.g. if you want to have a Tooltip over a text, just make:

<span title="This is a Tooltip">This is a text</span>

edited Jul 08 '19 at 14:41

husayt

13,559
7
48
77

answered Jun 30 '13 at 14:13

contradictioned

1,243
2
14
26

7

"Nice idea, but it'll only hold text, not html content like OP wants." – gaetanm Jun 30 '13 at 14:29

Bryan Algutria · Answer 8 · 2019-09-06T20:48:15.277

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
<button class="tooltip" tooltip-title="Save">Hover over me</button>

#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;
}

Feel free to place the code here in a code tag as well, just in case something ever happens to the link, and just to make it more readily available on this site. — ForeverZer0, Jul 16 '18 at 23:54

Tooltip with HTML content without JavaScript

8 Answers8

Linked