How to Create a "Tooltip Tail" Using Pure 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;}

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

CSS tooltip tail with image

The easiest way to do it using SVG and clip-path (just like twitter did)

Here's Fiddle Demo

It uses an img element and then it's masked. You can create the element using an online tool or free svg editor like InkScape

.tooltip{  width:380px;  object-fit:cover;  object-position:center;
  /*Chrome,Safari*/  -webkit-clip-path: polygon(58px 25px,70px 9px,81px 25px,380px 25px,380px 215px,11px 215px,10px 25px);
  /*Firefox*/  clip-path: url("#clipPolygon");
}

body{  background:url('http://ericasadun.com/wp-content/uploads/2013/04/f.png');}

<svg width="0" height="0">  <clipPath id="clipPolygon">    <polygon points="56 25,70 9,81 25,380 25,380 215,11 215,10 25">    </polygon>  </clipPath></svg>

<img class="tooltip" src="http://lorempixel.com/image_output/animals-q-c-640-480-3.jpg" alt="Sample Image">

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>

Creating a tooltip with nothing but css3?

I have to agree with all the comments above, a simple Google search will provide a solution. I just did a search and look what I found:

http://forrst.com/posts/Pure_css_tooltip_box_with_arrow_T_R_B_L-7kR

http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY

http://cssdeck.com/item/13/pure-css-tooltip-with-arrow

We all want to help but sometimes it feels like we're being asked to do everything. As developers we love to solve problems but with something like this I feel you do have to help yourself (sorry if I come across bitchy)

Is there a way to create a tail in a bubble with HTML 5?

Try this;
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

CSS tooltip with arrow and border

One of the solutions would be adding another pseudo element :before which is slightly smaller than :after. It's not the nicest solution ever, but it works perfectly fine for particular cases.

(You may notice that I've also cleaned up your code a little and replaced :after with :before to have proper z-index for both pseudo elements. Let me know if you need further explanation)

.up-arrow {    display: inline-block;    position: relative;    border: 1px solid #777777;    text-decoration: none;    border-radius: 2px;    padding: 20px;    margin-top: 50px;}.up-arrow:before {    content: '';    display: block;      position: absolute;    left: 140px;    bottom: 100%;    width: 0;    height: 0;    border: 10px solid transparent;    border-bottom-color: black;}
.up-arrow:after {    content: '';    display: block;      position: absolute;    left: 141px;    bottom: 100%;    width: 0;    height: 0;    border: 9px solid transparent;    border-bottom-color: white;}

<div href="#" class="up-arrow">Button with Up Arrow</div>

Pure CSS tooltip without jQuery

You can do it with pure css

You can use the hover pseudo class to trigger it.

Here is a general concept that should get you started

div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }

<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>

http://jsfiddle.net/AsKpv/

the div will need to follow the a tag for the '+' to work with CSS

if you want to make it snazzy you could use opacity: 0 and opacity:1 with a css3 transition to make it fade in as well.

good luck

CSS arrow on tooltip DIV

Try something like this:

.tooltip {  position: absolute;  top: 20px;  left: 60px;  z-index: 1;  background-color: #fff;  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);  width: 17em;  padding: 15px;}
.tooltip:after {  content: "";  position: absolute;  width: 0;  height: 0;  margin-left: -1em;  margin-top: -1em;  left: 100%; /* change to 0% for left arrow */  top: 50%;  box-sizing: border-box;  border: 1em solid black;  border-color: transparent transparent #fff #fff;  transform-origin: 50% 50%;  transform: rotate(-135deg); /* change to 45 deg for left arrow */  box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.1);  }
.card {  display: flex;  }
.card img {  display: block;  width: 100%;  height: 100%;  object-fit: cover;}
.card > div {  flex-basis: 50%;  }
.card-info {  padding-left: 15px;  }

<div class="tooltip">  <div class="card">    <div class="card-image">      <img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" />    </div>    <div class="card-info">      <h2>Test title</h2>      <h3>Event date</h3>      <h3>Event venue</h3>    </div>  </div></div>

creating css tooltip formatting issue with underlines in a tag

Chrome applies the link's text-decoration to the <div> because it is a child of the <a>.

Add a wrapper element around the <a> and make the tooltip <div> a sibling instead of a child of the <a>. Show the tooltip when the wrapper is :hovered.

Oh, and make that CSS make sense!

HTML

<span class="wrap">
    <a href="#">this is text</a>
    <div class="tooltip"> this is a tooltip</div>
</span>

CSS

.tooltip {
    color: #000000;
    display: none;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

span.wrap:hover .tooltip {
    display: block;
}

Demo: http://jsfiddle.net/mattball/u66GT/

---

Related Topics