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

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

81

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,241
1
13
21

answered Jun 30 '13 at 14:14

koningdavid

7,903
7
35
46

4

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
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
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
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
1

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 17 · Answer 2 · edited Jul 08 '19 at 14:41

17

Using the title attribute:

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

edited Jul 08 '19 at 14:41

husayt

14,553
8
53
81

answered Jun 30 '13 at 14:12

heytools

764
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 9 · 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 7 · Answer 5 · edited Oct 22 '18 at 14:33

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>

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:41

2

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

14,553
8
53
81

answered Jun 30 '13 at 14:13

contradictioned

1,253
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

score 2 · Answer 7 · edited Feb 02 '23 at 10:24

Another similar way to do it with 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 the Js Fiddle

Here are some links about transitions and other ways to do it:

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

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

score 0 · Answer 9 · answered Aug 17 '23 at 21:51

/* Mark the hover site for the tooltip with a div of class tipSite */
.tipSite {
    position:relative; /* Make tipSite the parent of the triggers and tipText */
    display:inline-block;
    height:1rem;
    color:blue;
    cursor:pointer;
    }
.leftTrigger,.rightTrigger {
    position:absolute;
    display:inline-block;
    width:50%; height:1rem;
    }
.leftTrigger {left:0px}
.rightTrigger {left:50%}

.tipText {
    position:absolute;
    display:inline-block;
    visibility:hidden; /* To avoid flashing of tipText */
    min-width:7rem; max-width:14rem;
    padding:.75rem;
    text-align:center;
    background-color:#ffd;
    color:#000;
    border:2px solid black;
    border-radius:.25rem;
    opacity:0;
    transition:opacity .2s;
    }

/* Animate tip into view on mouse hover */
.leftTrigger:nth-child(1):hover ~ .tipText {
    left:0px; transform:translateX(-100%) translateY(calc(-100% - .25rem));
    visibility:visible;
    opacity:1;
    z-index:1;
    }
.rightTrigger:nth-child(2):hover ~ .tipText {
    left:calc(100% + .5rem); transform:translateY(calc(-100% - .25rem));
    visibility:visible;
    opacity:1;
    z-index:1;
    }

<br><br><br><br><br><br>

This example shows how to create tooltips using CSS only. The user indicates where
the tooltip should show by where they click the target text or block. This example
only shows tooltips in two directions rather than four. For best results, view in full screen.
<br><br>

This is before text, <div class=tipSite>this is the trigger<div
    class="leftTrigger"></div>
    <div class="rightTrigger"></div>
    <div class=tipText>Short tip.</div></div>, and this is after text.<br><br>

Tooltip with HTML content without JavaScript

9 Answers9

Linked