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.

Answer 1

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

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

• http://www.w3schools.com/css3/css3_transitions.asp
• http://dev.opera.com/articles/view/css3-show-and-hide/

Answer 3

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

Answer 4

Using the title attribute:

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

Answer 5

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>

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

Answer 7

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>

Answer 8

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>

Answer 9

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/