Descripción con un triángulo [duplicar]

Esta pregunta ya tiene una respuesta aquí:

He creado un jsFiddle para esta pregunta. 

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>

Básicamente tengo una información sobre herramientas en mi sitio, y aparece a la derecha de mi enlace. Pero en el lado izquierdo de la caja negra me gustaría un triángulo adjunto para el cuadro que apunta al enlace, ¿es posible hacer esto usando solo CSS? al igual que esto, pero a la izquierda

descripción con flecha

Author: web-tiki, 2012-09-27
Source

4 answers

Puedes hacerlo con CSS, usando el truco del triángulo css 

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 en http://jsfiddle.net/dAutM/7/

Fragmento en vivo

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>
 38
Author: Gabriele Petrioli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-20 10:19:18

Desarrollé CSStooltip.com para hacer información sobre herramientas con triángulo solo en CSS.

Ejemplo:

introduzca la descripción de la imagen aquí

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;
}
 13
Author: GG.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-26 21:32:11

Prueba esto: http://ecoconsulting.co.uk/examples/css-tooltip /

Explica los problemas y los corrige, y permite una flecha y una descripción con un borde.

 3
Author: Dave Everitt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-26 21:22:30

Puede poner tanto el color como la imagen como fondo y también establecer su posición . En el siguiente código reemplace la imagen en la etiqueta url con una que tenga el triángulo que desea.

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 */
}

Ver más aquí http://www.w3schools.com/cssref/pr_background-position.asp

 1
Author: Vassilis Barzokas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-26 21:10:58