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 "<br />" tag, the tooltip shows "foo<br />bar", you know what I mean? — gaetanm
– gaetanm, Commented Jun 30, 2013 at 14:16

Andrzej Ziółek · Accepted Answer · 2018-10-22 14:33:02Z

82

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, 2018 at 14:33

Andrzej Ziółek

2,3391 gold badge16 silver badges22 bronze badges

answered Jun 30, 2013 at 14:14

koningdavid

8,1537 gold badges38 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

pzin Over a year ago

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.

koningdavid Over a year ago

@Kenneth_hj Hi Kenneth, the transition effect is CSS3, in older browser it will work, just without the transition!

Lukasz Czerwinski Over a year ago

I see... thank you for explaining. But anyway, rules with visibility didn't work for me on Chrome Win7...

koningdavid Over a year ago

@LukaszCzerwinski Yep, I noticed that, it used to work but no longer does! I removed visibility, thanks for you suggestion

Amos M. Carpenter Over a year ago

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.

|

husayt · Accepted Answer · 2019-07-08 14:41:57Z

17

Using the title attribute:

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

edited Jul 8, 2019 at 14:41

husayt

15.3k10 gold badges61 silver badges85 bronze badges

answered Jun 30, 2013 at 14:12

heytools

7824 silver badges16 bronze badges

2 Comments

dsgriffin Over a year ago

Nice idea, but it'll only hold text, not html content like OP wants.

Ian Dunn Over a year ago

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.

Andrzej Ziółek · Accepted Answer · 2018-10-22 14:33:33Z

10

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>

edited Oct 22, 2018 at 14:33

Andrzej Ziółek

2,3391 gold badge16 silver badges22 bronze badges

answered Oct 7, 2015 at 15:01

pawel

5088 silver badges21 bronze badges

1 Comment

J0ANMM Over a year ago

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.

Andrzej Ziółek · Accepted Answer · 2018-10-22 14:33:43Z

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>

Andrzej Ziółek · Accepted Answer · 2018-10-22 14:33:52Z

7

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, 2018 at 14:33

Andrzej Ziółek

2,3391 gold badge16 silver badges22 bronze badges

answered Mar 21, 2018 at 16:56

Marina

1,7801 gold badge20 silver badges26 bronze badges

1 Comment

Sridhar Ratnakumar Over a year ago

Question is about showing HTML content in tooltip; your answer shows textual content.

husayt · Accepted Answer · 2019-07-08 14:41:35Z

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 8, 2019 at 14:41

husayt

15.3k10 gold badges61 silver badges85 bronze badges

answered Jun 30, 2013 at 14:13

contradictioned

1,2532 gold badges14 silver badges26 bronze badges

1 Comment

gaetanm Over a year ago

"Nice idea, but it'll only hold text, not html content like OP wants."

Lee Goddard · Accepted Answer · 2023-02-02 10:24:33Z

2

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:

edited Feb 2, 2023 at 10:24

Lee Goddard

11.3k5 gold badges53 silver badges71 bronze badges

answered Jun 30, 2013 at 14:52

NVRM

13.5k2 gold badges102 silver badges102 bronze badges

1 Comment

Lukasz Czerwinski Over a year ago

It doesn't work well on Chrome/Win7 - the images are blinking/flipping

Bryan Algutria · Accepted Answer · 2019-09-06 20:48:15Z

1

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

edited Sep 6, 2019 at 20:48

answered Jul 16, 2018 at 23:04

Bryan Algutria

112 bronze badges

1 Comment

ForeverZer0 Over a year ago

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.

David Spector · Accepted Answer · 2023-08-17 21:51:53Z

/* 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>

Collectives™ on Stack Overflow

Tooltip with HTML content without JavaScript

9 Answers 9

13 Comments

2 Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

13 Comments

2 Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related