Pure CSS: Center Tooltip Above Text on Hover Pt. 2

Pure CSS: Center Tooltip Above Text On Hover

If you position the block on top of the text and above and set text-align: center, there shouldn't be any need to use JavaScript.

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

JSBin.

Pure CSS: Center Tooltip Above Text On Hover pt. 2

Here's the simplest solution using CSS3 transform.

JSfiddle Demo

.drag-hint {  position: relative;  margin: 50px;  display: inline-block;  padding: 0 1em;  border: 1px solid red;  /* for visual reference */}.drag-hint > span {  background: black;  color: white;  white-space: nowrap;  display: none;}.drag-hint:hover > span {  display: inline-block;  position: absolute;  top: -25px;  left: 50%;  transform: translateX(-50%);  text-align: center;}

<span class="drag-hint">    <span>drag drag drag drag drag</span>Hover me</span>

<span class="drag-hint">    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>Hover me</span>

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 to create a pure CSS tooltip with HTML content for inline elements

Note that W3C says :

Defining term: If the dfn element has a title attribute, then the exact value of that attribute is the term being defined.

Accordingly, you can have a simple solution where you put the term being defined inside the title attribute, and the definition inside

dfn::before {content: attr(title);padding: 0 0 1em;}      dfn button {display: none; position: absolute}dfn:hover button, dfn:focus button {display: block;}

<p>An     <dfn title="onomasticon" tabindex="0"><button disabled>       <p>Another word for <strong>thesaurus</strong></p>       <p><img src="http://i.imgur.com/G0bl4k7.png" /></p>      </button></dfn> is not a dinosaur.</p>

Tooltip with a triangle

You can do it with CSS, by using the css triangle trick

a.tip span:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right:8px solid black;
    left:-8px;

    top:7px;
}

Demo at http://jsfiddle.net/dAutM/7/

---

live snippet

a.tip {  position: relative;}
a.tip span {  display: none;  position: absolute;  top: -5px;  left: 60px;  width: 125px;  padding: 5px;  z-index: 100;  background: #000;  color: #fff;  -moz-border-radius: 5px;  /* this works only in camino/firefox */  -webkit-border-radius: 5px;  /* this is just for Safari */}
a.tip span:before {  content: '';  display: block;  width: 0;  height: 0;  position: absolute;  border-top: 8px solid transparent;  border-bottom: 8px solid transparent;  border-right: 8px solid black;  left: -8px;  top: 7px;}
a:hover.tip {  font-size: 99%;  /* this is just for IE */}
a:hover.tip span {  display: block;}

<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>

Tooltip using css only

Can it be done with pure CSS? Yes. However, with JavaScript you get much more control.

body { margin: 3em; }
.tooltip { position: relative; }
.tooltip::before {  content: "\2003" attr(class); /* print em-space with class text */  text-indent: -3.9em; /* add negative text offset to hide class name */  display: inline-block;  position: absolute; bottom: 50%;  background: #000; color: #FFF; padding: 5px; border-radius: 5px;  opacity:0; transition:0.3s; overflow:hidden;  max-width: 50%; /* avoids very long sentences */  pointer-events: none; /* prevents tooltip from firing on pseudo hover */}
.tooltip:hover::before { opacity:1; bottom: 100%; }

<p class="tooltip Tooltip Text">My Text</p><p class="tooltip Dolor sit amet bla bla">Lorem Ipsum</p>

CSS tooltips won't stretch, can only have fixed width

.tooltip {
  outline: none;
  position: relative;
  width: 75px;
  min-width: 75px;
  max-width: 255px;
}

.tooltip .tool-content {
  margin:0;
  padding:0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width:100%;
  height:100%;
}

You can remove span and replace it with a block level element (like div with style display:block)

---

Related Topics