Tooltip b-t

Bom dia galera!
Venho aqui trazer mais uma partilha.
Como podem ver imagem acima o resultado final de tooltip...
Tooltip c/ efeito e com imagens criadas por mim,espero seja útil.
Vamos então aplicar ao blogger...

Antes de tudo faça cópia do seu template.

Entre em modelo no seu blog para colocarmos css.
E acima de...

]]></b:skin

Coloque este meu código:

}
.area {
  width: auto px;
  height: auto px;
  margin: auto;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
}

.ferramentabt {
    font-weight: bold;
  font-family: 'Bobber', Bobber;
  color: #dbd100;
  position: relative;
  cursor: pointer;
  line-height: 2.5;
}

.ferramentabt:before
 {
  display: area;
  position: absolute;
  visibility: hidden; 
  left: 50px;
  margin-bottom: -15px;
  transition: margin .6s;
  line-height: 1.3;
}

.ferramentabt:before {
  width: 200px;
height:  60px;
  padding: 30px;
  box-sizing: border-box;
  bottom: 30px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Bobber', Bobber;
  text-align: center;
  margin-left: -130px;
  background: url(COLOQUE AQUI S LINK DA IMAGEM);
  content: attr(data-title);
  color: #fff;
}
.ferramentabt:hover:before
 {
  visibility: visible;
  opacity: 1;
  margin-bottom: 0px;
}

Agora vamos colocar html para isso basta fazer post normal e colocar este meu código na parte HTML...Ex:na imagem:

 
<span class="ferramentabt" data-title="AQUI S TEXTO!">AQUI S PALAVRA</span>

Exemplo aqui abaixo: Venha fazer novos amigos e curtir as melhores musicas! Best-Tuga

NOTAS: Aqui coloca s imagem: background: url(COLOQUE AQUI S LINK DA IMAGEM); Abaixo fica links imagens fiz:

 
http://i65.tinypic.com/24dhbty.jpg

 
http://i65.tinypic.com/24dhbty.jpg

 
http://i65.tinypic.com/30c3gpu.jpg

É isso ai espero q sirva ,alguma questão deixe recado ,fuixxxx...

Tooltip b-t

► 0

► vários

► Cartita

B-T

Tooltip b-t

Ajuda

Feed

Eu aqui

Recomendo

Estatísticas

…

…

…