Tooltip 01 em css -  Posições diferentes Exclusivo
Autor: Keells Silva | Publicado: 2016-03-07T22:45:00-03:00




Se você estiver olhando para dar aos seus leitores ou ate mesmo usar no seu cantinho a opção com um pouco mais de informação ou de navegação opcional, uma ótima solução é usar dicas de ferramentas.  O usuário passa o cursor sobre um item, sem clicar nele, e uma pequena caixa aparece com informações adicionais sobre o item que está sendo pairado.

Dicas são um "elemento de interface gráfica comum", os quais são utilizados em conjunto com um cursor, geralmente um ponteiro do rato.


Para dar a sua dica: A unica diferença que não é um Java, e sim manual, podendo destacar seu post separadamente !




.tooltip {
position: relative;display: inline-block;border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 77px;
background-color: #000000;
color: #fff;
text-align: center;
border-radius: 6px;
border: 4px double #fff;
padding: 0px 3px;
position: absolute;
z-index: 1;
top: -3px;
left: 123px;}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip2 .tooltiptext2 {
visibility: hidden;
width: 77px;
background-color: #000000;
color: #fff;
text-align: center;
border-radius: 6px;
border: 4px double #fff;
padding: 0px 3px;
position: absolute;
z-index: 1;
top: -3px;
left: -97px;
}
.tooltip2:hover .tooltiptext2 {
    visibility: visible;
}
.tooltip3 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip3 .tooltiptext3 {
    visibility: hidden;
    width: 77px;
    background-color: black;
    color: #fff;
border: 4px double #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -38px;
}
.tooltip3:hover .tooltiptext3 {
visibility: visible;
}
.tooltip4 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip4 .tooltiptext4 {
visibility: hidden;
width: 77px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
border: 4px double #fff;
padding: 0px 0px;
position: absolute;
z-index: 1;
bottom: -146%;
left: 50%;
    margin-left: -38px;
}
.tooltip4:hover .tooltiptext4 {
    visibility: visible;
}

Para essa direção
Encoste em mim !Gostou ?No Código Html do seu blog acima de /b:skin acrescente:.tooltip {
position: relative;display: inline-block;border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 77px; /LARGURA DA CAIXINHA
background-color: #000000;/ COR DO FUNDO
color: #fff;
text-align: center;
border-radius: 6px;
border: 4px double #fff; /COR DA BORDA
padding: 0px 3px;
position: absolute;
z-index: 1;
top: -3px; / ALTURA
left: 123px; / POSIÇÃO DIREITA/ESQ.}
.tooltip:hover .tooltiptext {
visibility: visible;
}Dentro da sua Postagem acrescente:SUA FRASETITULO DO TOOLTIPPara essa direção
Encoste em mim !Gostou ?No Código Html do seu blog acima de /b:skin acrescente:.tooltip2 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip2 .tooltiptext2 {
visibility: hidden;
width: 77px; / LARGURA DA CAIXINHA
background-color: #000000; /COR DO FUNDO
color: #fff;
text-align: center;
border-radius: 6px;
border: 4px double #fff;
padding: 0px 3px;
position: absolute;
z-index: 1;
top: -3px; /ALTURA
left: -97px;} /POSIÇÃO DIR./ESQ
.tooltip2:hover .tooltiptext2 {
visibility: visible;
}
Dentro da sua Postagem acrescente:SUA FRASETITULO DO TOOLTIPPara essa direção
Encoste em mim !Gostou ?No Código Html do seu blog acima de /b:skin acrescente:.tooltip3 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip3 .tooltiptext3 {
visibility: hidden;
width: 77px; / LARGURA DA CAIXINHA
background-color: #000000; / COR DO FUNDO
color: #fff;
border: 4px double #fff;
text-align: center;
border-radius: 6px;
padding: 0px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -38px; /POSIÇÃO DIR./ESQ
}
.tooltip3:hover .tooltiptext3 {
visibility: visible;
}Dentro da sua Postagem acrescente:SUA FRASETITULO DO TOOLTIPPara essa direção
Encoste em mim !Gostou ?No Código Html do seu blog acima de /b:skin acrescente:.tooltip4 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip4 .tooltiptext4 {
visibility: hidden;
width: 77px; /LARGURA DA CAIXINHA
background-color: #000000; /COR DO FUNDO
color: #fff;
text-align: center;
border-radius: 6px;
border: 4px double #fff;
padding: 0px 0px;
position: absolute;
z-index: 1;
bottom: -146%;
left: 50%;
margin-left: -38px; / POSIÇÃO DIR./ESQ
}
.tooltip4:hover .tooltiptext4 {
visibility: visible;
}Dentro da sua Postagem acrescente:SUA FRASETITULO DO TOOLTIP
Somente faça as alterações na área destacada de CAPSLOCK

Espero que tenham gostado, e que utilizem como quiser ... logo mas trarei outras posições seguidas de ( Margin-top ), grande beijo !