Tooltip with a triangle

Tooltip with a triangle

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

Link!Hi its me!

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 by Sport Billy for Tooltip with a triangle

You can put both color and image as background and also set its position . In the code below replace the image in the url tag with one that has the triangle you want.

a.tip span {      display: none;      position: absolute;      top: -5px;      left: 60px;      width: 125px;      padding: 5px;      z-index: 100;      background: #000 url("http://www.triangle-fr.com/img/tooltip.png");      color: #fff;      -moz-border-radius: 5px; /* this works only in camino/firefox */      -webkit-border-radius: 5px; /* this is just for Safari */  }  

see more here http://www.w3schools.com/cssref/pr_background-position.asp

Answer by David for Tooltip with a triangle

This is a nice clean way, requiring only one more element. http://css-tricks.com/snippets/css/css-triangle/

I'll post a description of link once I'm on my laptop and not my phone.

Answer by GG. for Tooltip with a triangle

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 by Gaby aka G. Petrioli for 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/

Answer by Dave Everitt for Tooltip with a triangle

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.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72