How to Create Custom Tooltips with CSS Pseudoelements

How can I create custom tooltips with css pseudoelements

JSFiddle is here. Note: The original content is here.

.tooltip {

  display: inline;

  position: relative;

}

.tooltip:hover {

  color: #c00;

  text-decoration: none;

}

.tooltip:hover:after {

  background: #111;

  background: rgba(0, 0, 0, .8);

  border-radius: .5em;

  bottom: 1.35em;

  color: #fff;

  content: attr(title);

  display: block;

  left: 1em;

  padding: .3em 1em;

  position: absolute;

  text-shadow: 0 1px 0 #000;

  white-space: nowrap;

  z-index: 98;

}

.tooltip:hover:before {

  border: solid;

  border-color: #111 transparent;

  border-color: rgba(0, 0, 0, .8) transparent;

  border-width: .4em .4em 0 .4em;

  bottom: 1em;

  content: "";

  display: block;

  left: 2em;

  position: absolute;

  z-index: 99;

}

<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>

How can I create a tooltip tail using pure CSS?

Here's an example with a box-shadow, all latest version browsers should support this

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {

  font-family: Helvetica, Arial, sans-serif;

}

#toolTip {

  position: relative;

}

#toolTip p {

  padding: 10px;

  background-color: #f9f9f9;

  border: solid 1px #a0c7ff;

  -moz-border-radius: 5px;

  -ie-border-radius: 5px;

  -webkit-border-radius: 5px;

  -o-border-radius: 5px;

  border-radius: 5px;

}

#tailShadow {

  position: absolute;

  bottom: -8px;

  left: 28px;

  width: 0;

  height: 0;

  border: solid 2px #fff;

  box-shadow: 0 0 10px 1px #555;

}

#tail1 {

  position: absolute;

  bottom: -20px;

  left: 20px;

  width: 0;

  height: 0;

  border-color: #a0c7ff transparent transparent transparent;

  border-width: 10px;

  border-style: solid;

}

#tail2 {

  position: absolute;

  bottom: -18px;

  left: 20px;

  width: 0;

  height: 0;

  border-color: #f9f9f9 transparent transparent transparent;

  border-width: 10px;

  border-style: solid;

}

<div id="toolTip">

  <p>i can haz css tooltip</p>

  <div id="tailShadow"></div>

  <div id="tail1"></div>

  <div id="tail2"></div>

</div>

Scrollable / hoverable CSS tooltip with psuedo elements

I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text:

HTML

<div class="tooltip tooltip-scroll">Hover over me for scrollbar
    <div class="wrapper"> 
        <span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
    </div>
</div>

.wrapper{

    position:relative;

}

.tooltip {

    transform: none;

    margin: 50px;    

}

.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {

    pointer-events: auto;

    opacity: 1.0;

}

.tooltip > .tooltip-text, .tooltip >.wrapper {

    display: block;

    position: absolute;

    z-index: 6000;

    overflow: visible;

    padding: 5px 8px;

    margin-top: 10px;

    line-height: 16px;

    border-radius: 4px;

    text-align: left;

    color: #fff;

    background: #000;

    pointer-events: none;

    opacity: 0.0;

    -o-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -webkit-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

}

/* Arrow */

.tooltip > .tooltip-text:before, .tooltip > .wrapper:before  {

    display: inline;

    top: -5px;

    content: "";

    position: absolute;

    border: solid;

    border-color: rgba(0, 0, 0, 1) transparent;

    border-width: 0 .5em .5em .5em;

    z-index: 6000;

    left: 20px;

}

/* Invisible area so you can hover over tooltip */

.tooltip > .tooltip-text:after, .tooltip > .wrapper:after  {

    top: -20px;

    content: " ";

    display: block;

    height: 20px;

    position: absolute;

    width: 60px;

    left: 20px;

}

.wrapper > .tooltip-text {

    overflow-y: auto;

    max-height: 40px;

    display: block;

}

<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>

<p/><p/><p/>

<div class="tooltip tooltip-scroll">Hover over me for scrollbar

    <div class="wrapper"> 

    <span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>

    </div>

</div>

Add a tooltip to a div

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

How do I add a tool tip to a span element?

Here's the simple, built-in way:

<span title="My tip">text</span>

How to define tooltip text in CSS?

there you go:

.tooltip {

  position: relative;

  display: inline-block;

  border-bottom: 1px dotted black;

}

.tooltip:after {

  content: "foo bar";

  position: absolute;

  top: -30px;

  right: 0;

  left: 0;

  display: none;

  text-align: center;

  background-color: #000;

  color: #fff;

  border-radius: 4px;

  padding: 2px;

}

.tooltip:hover:after {

  display: block;

}

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me</div>

Is it possible to make pure CSS tooltips that display after a delay?

It can be done with a CSS transition delay.

<style>

a:after {

    opacity: 0;

    content: "";

}

a:hover:after { 

    opacity: 1;

    transition: opacity  0s linear 1s;

    content: " (Forgetfulness is a form of freedom. - Kahlil Gibran)";

}

</style>

<a href="#" class="tooltip">What am I?</a>

---

Related Topics