tooltip

How to: a floating box on your page with tooltip hovers, networks, social and stats

I made a site for it to give a live preview and provide the code:

http://floatybox.tumblr.com/

The border radius of this box changes when you hover over it. When you hover over each symbol a title pops up called a “tooltip”. There is more explanation of tooltips in this code, and I’ll make a post about them soon!

The networks section has a horizontal scroll so you can add multiple networks. The stats include a user counter and a freehostedscript that displays your browser that you’re using to view the blog.

This box is highly customizable :) Enjoy! Here’s the link again:

http://floatybox.tumblr.com/

Basic Tooltip Tutorial

I’ve been meaning to make this for a while now! It includes the basic tooltip code with notes on how to customize it (that are inside the code!) I’ll make a post about some pre-designed tooltips soon too :)

What are tooltips?

For those of you who don’t know or haven’t seen them, tooltips are the labels that can appear when you hover over links. It’s a nice touch to make your blog look unique or cohesive, and it’s also useful if you want to use symbols for your links but also want a label to appear when you hover on the symbol (so people know what they’re clicking).

TO USE A TOOLTIP: 

Your links, in html, look like this:

<a href=”linkURL”>link title</a>

to start using tooltips on your links, change that format to this:

<a title=”tooltip text” href=”linkURL”>link title</a>

Basic tooltip coding for a tooltip that looks like this:

  1. Add this under <head>

2. Follow the “USE A TOOLTIP” steps in the beginning of this tutorial!

Tooltips diferentes

Bom,para quem não sabe,tooltip são balões que trazem palavras ou frases dentro, só que no caso, esses tooltips só podem ser usado em imagens,como num recomendo e tals. Irei ensinar dessa vez,quatro tipos de tooltips bem legais para vocês poderem usar.

Demo 01 ●●●  

Demo 02 ●●●

Demo 03 ●●●

Demo 04 ●●● 

No código do css que estarei postando á baixo, no primeiro tt-wrapper li a vai ter o width e heightque é a largura e altura das suas imagem que vão ficar, já no tt-wrapper li a span vai ter a width que é largura do balão,que você pode alterar se preferir, o margin-left que é a posição onde irá ficar, se é mais ao centro ou ao canto, border: 4px solid que basicamente não mudou nada do meu tooltip já que utilizei a mesma cor de fundo,mais ele é o contorno, backgroundtext-shadow que são definidos pelo rgba ao invés de cores em hexadecimal (#cor) pois o fundo terá uma leve transparência, mais é super fácil. Abram seu photoshop e escolham a cor que iram querer para o fundo, quando vocês vão pegar uma cor, simplesmente copiam o que aparece depois de #, agora vamos copiar os números que estão em R, G e B e iremos colocar, exatamente nesta ordem no código do rgba. Ou seja: background-color: rgba(valor do R, valor do G, valor do B, 0.7); Ah, o 0.7 é o valor da transparência. E por fim, o border-top: 10px solid rgba(0,0,0,0.1); que é a setinha,você pode mudar se quiser,mais não aconselho. Já o box-shadow é a sonha que ficar no balão. E o resto dos código,não mexa em nada. Lembrando que você tem que colocar suas imagens que vão aparecer,dentro do css,faça que nem está logo á baixo:

.tt-wrapper li .CLASS DA IMAGEM 01{ background: url('imagem') top left no-repeat; }

Se quiserem mais imagens,é só ir repetindo o código,mudando a class da imagem. 

Demo 01

Logo á cima,ensinei o necessário para você poder pessoalizar o seu tooltip,agora vai no seu css e coloque o código á baixo:

.tt-wrapper li{float: left; list-style-type:none;}

.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px;  outline: none; position: relative;}

.tt-wrapper li a span{width: 90px; height: auto; line-height: 20px; padding: 1px;  left: 50%; margin-left: -55px; font-family: 'Georgia', serif;  font-weight: 400; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #4f4e76; background: rgba(78,79,118,1); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.tt-wrapper li a span:before,

.tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1);}

.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #4f4e76;}

.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px;}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">     <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li> </ul>

Enfim,é isso. Demo 02 No css do demo número 02,vai ter no tt-wrapper li a span o width e height é o tamanho que o balão irá ficar, e lembrando que eles tem que serem iguais, e no line-height é a altura que o texto dentro no balão irá ficar. De resto,não mexa em nada,só na aparência mesmo. Coloque o código abaixo no css:

.tt-wrapper li a{ display: block; width: 68px;height: 70px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px;} .tt-wrapper li{float: left; list-style-type:none;} .tt-wrapper { padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto;} .tt-wrapper li a span{ width: 70px; height: 70px; line-height: 70px; padding: 10px; left: 50%; margin-left: -55px; font-family: 'Georgia', serif; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(20, 39, 53, 0.1); text-align: center; border: 5px solid #162a39; background: rgba(22,42,57,0.5); text-indent: 0px; position: absolute; pointer-events: none; border-radius: 50%; bottom: -40px; opacity: 0; box-shadow: 0px 3px 8px rgba(0,0,0,0.1); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .tt-wrapper li a:hover span{ opacity: 0.9; bottom: 50px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">     <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li> </ul>

Enfim,é isso. Demo 03 Logo á cima,ensinei o necessário para você poder pessoalizar o seu tooltip,agora vai no seu css e coloque o código á baixo:

.tt-wrapper a{display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px;} .tt-wrapper li{float: left; list-style-type:none;} .tt-wrapper li a span{ width: 80px; height: auto; padding: 10px; left: 50%; margin-left: -55px; font-family: 'Alegreya SC', Georgia, serif; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(255, 155, 106, 0.6); text-align: center; border: 5px solid #ff9b6a; background: rgba(255, 155, 106, 0.5); text-indent: 0px; position: absolute; pointer-events: none; bottom: -40px; opacity: 0; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(0deg) scale(0); -moz-transform: rotate(0deg) scale(0); -o-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0);} .tt-wrapper li a:hover span{ opacity: 0.9; bottom: 100px; -webkit-transform: rotate(-90deg) scale(1); -moz-transform: rotate(-90deg) scale(1); -o-transform: rotate(-90deg) scale(1); -ms-transform: rotate(-90deg) scale(1); transform: rotate(-90deg) scale(1);}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">     <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li> </ul>

Enfim,é isso aí. Demo 04
Finalmente o último tooltip de hoje, e o que mais gosto. Ele é bem parecido com o primeiro que ensinei,daí é só fazer praticamente a mesma coisa do outro, coloque o código abaixo no seu css:

.tt-wrapper li{float: left; list-style-type:none;} .tt-wrapper{ padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto;} .tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Georgia', serif; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(240,126,132,0.1); text-align: center; border: 4px solid #f07e84; background: #f07e84; text-indent: 0px; border-radius: 5px; position: absolute; bottom: 70px; opacity: 0; visibility: visible; pointer-events: none; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transform: translate(35px) rotate(25deg) scale(1.5); -moz-transform: translate(35px) rotate(25deg) scale(1.5); -o-transform: translate(35px) rotate(25deg) scale(1.5); -ms-transform: translate(35px) rotate(25deg) scale(1.5); transform: translate(35px) rotate(25deg) scale(1.5); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(240,126,132,0.1);} .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #f07e84;} .tt-wrapper li a:hover span{ visibility: visible; opacity: 0.9; -webkit-transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -o-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1);}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">     <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li> </ul>

Bom gente, é isso, espero que tenham gostado dos efeitos e tudo mais. Foi muito cansativo fazer esse tutorial,nossa.. Enfim,se usar credite. /Geovanna
Tutorial: Tooltip

The tooltip is this one:

Well, here we go.

Step one:

Paste this code before </ head>. [take the script here]

Step two:

Paste this code into the style of your code.

#s-m-t-tooltip {

max-width:300px; /* maximum width */

background-color:#CD96CD; /* color background */

border:1px solid #8B658B; /* color, shape and thickness of the border */

font-family:’tahoma’; /* font of lyrics */

font-size:9px; /* font size */

color:#8B658B; /* font color */

letter-spacing:1px; /* font spacing */

text-transform:lowercase; /* uppercase, lowercase, none */

padding:3px 4px 3px 4px; /* padding size */

margin:20px 0px 0px 20px; /* margin size */

z-index:999999999999999999999999999999999999;

border-radius: 2px; /* border radius */

}

Heeding: the codes are marked, then it will be easy ways to identify the commands to modify them.

Step three:

Whenever you use a link to use it in this way:

<a title=”tooltip name" href="url"> link name </ a>

And if you want to use the tooltip for an image just use the following code:

<a title=”tooltip name" href="url"> <img src= "url image"> </ a>

-modify what is in bold-

Credite if you are helpful, please.

Colocar efeito tooltip nos links do seu Tumblr

Antes de começar a explicar o tutorial, como colocar o efeito no seu Tumblr, personalizar ou tudo mais, gostaria de explicar o que é tooltip, pois alguns usuários não sabem o que é, ou simplesmente conhecem o efeito por outro nome.

Primeiramente, coloque o mouse sobre este link por uns instantes: TumbleTricks. Você verá que aparecerá um retângulo contendo o título do link (ao longo do tutorial você verá como colocar este título). Porém este link ainda não está com tooltip, acesse este link, e coloque o mouse sobre o link que está nesta página: link com tooltip. Você notará que a “janelinha” com o título do link está personalizada.

Este efeito é chamado tooltip, e você pode personalizar esta janelinha da maneira que quiser =) Por isso, caso queira personalizar os links do seu Tumblr desta maneira, continue lendo o tutorial !

Keep reading

Tutorial: Tooltips

INSTRUCTIONS:

  1. Put this code before <style type=”text/css”>
  2. Put this code after <style type=”text/css”>

TO MAKE THEM APPEAR:

  • Add a title to a link like this.
    Before: <a href=”/”>home</a>
    After: <a href=”/” title=”go to home page”>home</a>

{ + Tooltips are the little boxes that appear when you hover over some links }

anonymous asked:

how do you make those boxes to show up when you hover the link??

these boxes are called tooltips.
1
. paste this under <head>
2. paste this under {CustomCSS}
3. search for the link section under {CustomCSS}, it should look something like this

4. now you’ll replace
<a href=”/”>index</a> 

with

<a title=”boxname"href="url">nameoflink</a>

nameoflink is the thing the link says, boxname is the thing the box says when you hover over the link, and url is the url of the link. just replace those words with the things you want to use and thats it. do the same with the other links and message me if you need any help with it.

Bounce tooltip.

Esse é um tooltip diferente, ele dá tipo um “pulinho” haha. Mas é bem legal!

Visualize o efeito aqui.

Primeiro, coloque o seguinto código antes de </style>:

#sdreamy ul {
    padding:0;
	margin:0;
	float:left;
	width:80%;
	margin:0 10%;
	list-style:none;
	font-size:1em;
}

#sdreamy ul li {
	padding:0;
	margin:0;
	float:left;
	position:relative;
}

#sdreamy ul li a {
	margin:5px;
	margin-left:20px;
	margin-right:20px;
	float:left;
	height:64px;
	width:64px;
	text-decoration:none;
	color:#333;
	position:relative;
   
}

a.img1 { background:url(http://media.tumblr.com/tumblr_m5o3rqVP6Z1r16se4.png) no-repeat; }
a.img2 { background:url(http://media.tumblr.com/tumblr_m5o3s2Gikt1r16se4.png) no-repeat; }
a.img3 { background:url(http://media.tumblr.com/tumblr_m5o3vsjSsI1r16se4.png) no-repeat;}
a.img4 { background:url(http://media.tumblr.com/tumblr_m5o3w4Mt5H1r16se4.png) no-repeat;}
a.img5 { background:url(http://media.tumblr.com/tumblr_m5o3ulu36W1r16se4.png) no-repeat;}



#sdreamy a small { 
    background:#fff; 
	text-align:center; 
	width:70px; 
	padding:5px; 
	border: 1px solid #eee;
	border-radius:10px; 
	display:none; 
	color:#888; 
    font-family: '04b03';
	font-size:8px; 
    text-transform: uppercase;
    text-indent:0;
    
    
}

#sdreamy a:hover small { 
	display:block; 
	position:absolute; 
	top:15px; 
	left:50%; 
	margin:-40px; 
    	z-index:9999; 
	-moz-animation:mymove .25s linear;  
	-webkit-animation:mymove .25s linear; 
} 


@-moz-keyframes mymove {
    0%{ -moz-transform:scale(0,0); opacity:0;}
	50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
	75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
	0%{ -webkit-transform:scale(0,0); opacity:0;}
	50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
	75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -webkit-transform:scale(1,1); opacity:1;}
}

Agora vamos entender o código. Na div "#sdreamy a small" você mudar a cor da palavrinha, o background, a largura, tamanho da fonte, a própria fonte etc etc.

Já nas divs a.img1, a.img2, a.img3, a.img4, a.img5, você trocas os links, pelos links da sua imagem. Já a largura da imagem, você edita na div "#sdreamy u li a", trocando height, pela altura, e width, pela largura.

E no html, ou seja, onde você quer que apareça, coloque esse código:

<div id="sdreamy">
    <ul>
    <li><a href="LINK" class="img1"><small>escreva aqui</small></a></li>
    <li><a href="LINK" class="img2"><small>escreva aqui</small></a></li>
    <li><a href="LINK" class="img3"><small>escreva aqui</small></a></li>
    <li><a href="LINK" class="img4"><small>escreva aqui</small></a></li>
    <li><a href="LINK" class="img5"><small>escreva aqui</small></a></li>
    </ul>
</div>

Espero que tenham entendido, qualquer coisa, a ask tá ali :)

Tutorial por Van.

TOOLTIP TUTORIAL

1. paste this before </style>:

#s-m-t-tooltip {

max-width:300px;

padding:3px 4px 5px 4px;

margin:20px 0px 0px 20px;

background-color:#fff; /* change the background color */

border:1px solid #ddd; /* change the border color */

font-family:calibri; /* change the font */

font-size:9px; /* change the font size */

letter-spacing:2px; /* change the letter spacing */

text-transform:uppercase; /* can be uppercase, lowercase, none*/

color:#999; /* change the text color */

z-index:999999999999999999999999999999999999;

}


2. paste this after </head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:90,

tip_fade_speed:600,

attribute:"title"

});

});

})(jQuery);

</script>

3. to put a tooltip on a link, you need to put title=”tooltip text” in the link coding, like this:

regular link:

<a href="http://www.url.com">link text</a>

link with tooltip:

<a title=”tooltip text”href=”http://www.url.com”>link text</a>

credit to louminary