Tooltip with a triangle [duplicate]

Question

I have created a jsFiddle for this question.

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

Basically I have a tooltip on my site, and it appears to the right of my link. But on the left hand side of the black box I would like a triangle attached to the box pointing to the link, is it possible to do this using only CSS? just like this but to the left

Answer 1

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>

Answer 2

I developed CSStooltip.com to make tooltips with triangle in CSS only.

Example :

span.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent #FFFFFF transparent transparent;
      top: 11px;
      left: -24px;
}

Answer 3

Try this: http://ecoconsulting.co.uk/examples/css-tooltip/

It explains the problems and fixes the issues, and allows for an arrow and tooltip with a border.

Contents of the link

CSS-only tooltips using :after and :before

These tooltip rollovers use a custom HTML5 a tag data- attribute (data-tooltip) to populate a tooltip displaying text contained in the attribute. The arrow triangle is formed by two generated overlapping elements with only the top border visible (r-l are transparent, bottom is 0px). All tooltip text is an extension of the link and therefore clickable.

View source to get code - it's as clean as possible, and each tooltip has a separate block of css styles—use the Arrow tooltip (final) CSS for the finished styles. Don't like the colour? You know what to do. Original inspiration: Nicolas Gallagher's Pure CSS speech bubbles, and a desire to emulate Addy Osmani's JQuery tooltip in pure CSS.

1. CSS-only tooltip using :before (no arrow)

   This link with a CSS-styled rollover tooltip uses a data- attribute for the tooltip content. You can also use :after to generate the tooltip. A box-shadow makes it appear to float above the content.

2. CSS-only tooltip arrow with :before and :after (a tag inside span)

   Since the link's :before property is already used for the tooltip text, we need an extra element to provide further generated content. This CSS-styled rollover tooltip link adds an arrow made from overlapping :before and :after properties on a span that wraps the link. The triangle has no width or height and is constructed from borders only, which means we can't use a box-shadow with positive values, as it appears outside the transparent rectangle of the l-r borders and not around the 'arrow'.

Fault: lingering triangle when hovering over arrow's 'border'. Fault: Mozilla (Firefox): arrow border is beneath link, needs higher z-index.

3. Final CSS-only tooltip arrow with :before and :after (span inside a tag)

   This translucent CSS-styled rollover tooltip uses a span inside the a tag. The shadow is reinstated but with negative top/left values to avoid the arrow. For a final touch alpha transparency (rgba) is applied to the tooltip elements, with trial-and-error tweaks to blend the arrow's colour into the lower gradient and reduce the visibility of the (darker) border colour of the outer triangle beneath the inner.

You can add it to any link by applying the tooltip class and wrapping the link text in a span. The tooltip inherits the span's font-weight value by default.

Sadly, CSS3 (in this case fade-in-nicely) transitions on generated elements aren't supported widely enough yet (FF only but even there, I couldn't get it to work).