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/

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.

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

Elly’s NEW Base code agora com menos bugs e com certeza o base code mais completo que você vai usar.

Static Preview - Pastebin

Features:

  • Tags fáceis de entender
  • Simples
  • Compatível com posts em grade
  • Instruções (Em PT - BR) no próprio theme
  • Sem Appearence
  • Scroll Infinito

Bônus:

  • S-M-T Tooltip
  • Scroll personalizado
  • Seleção colorida

Links úteis para novatos em CSS / Html:

  1. W3schools
  2. Maujor
  3. HTML.net
  4. Google (Ele é seu amigo também! =D)

Não redistribua a base como se fosse sua

Sim, você pode criar themes com ela e não precisa de créditos, mas seria legal se você colocasse em algum lugar.

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

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.

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.

So in this post I showed you guys how to create tooltips, little blurbs of text that appear when you hover over a link. How about shaping them to look like speech bubbles?!

This tutorial is for if you don’t already have tooltips installed in your code. For ease of use, if you want tooltips that are shaped like speech bubbles and you already have tooltips in your theme, go back and remove the tooltip code!

Now you’re ready to add in this feature.

1. Add this under <head>:

2. Use this instead of your links (replace the quotation marks, and if you’re confused, reference my original post!)

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

There are instructions in the code in the iframe (that weird little box I use to deliver the code in this post) on customizing this tooltip!

(I learned how to do this by editing a code from here!)

Tooltip tutorial.

So here’s a tutorial for my tooltips from my current theme (theme #8), if you want a preview it’s here. (hover the menu)

difficulty: medium

must need: experience with html.

Let’s start shall we? (:

_______

First of all you need to paste this code before <style type=“text/css”>.

Then post this on your CSS.

To use it in images you need to use this code:

<a class="tooltip" href="LINK" title="WHAT YOU WANT TO APPEAR IN YOUR TOOLTIP"><img src="IMAGE LINK"></a>

To use it in links you need to use this code:

<a class="tooltip" title="WHAT YOU WANT TO APPEAR IN YOUR TOOLTIP"><a href="YOURLINK">THE TEXT</a>

Now to change the postions of the box and the triangle of the tooltip, change the values underlined in this image. Remember you must have some experience with html to do this!

_______

Good luck (: if you’re using please like/reblog this post, and if you want you can credit me for the tooltips, if you don’t want to its fine, i just ask you to not say you own the codes, enjoy!

Tooltip personalizado

Visualização:

   

Bom, a codificação, eu peguei, modifiquei e encurtei do dicasparablogs.com.br, mas se usar dê like e se puder credite à nós!

Para começar, cole isso aqui antes de </head>, não modifique nada, apenas cole lá.

Agora, cole o código abaixo antes de </style>

#ttcont {
display:block;
padding: 3px 6px 3px 6px;
margin-left:5px;
background:#00ccff;
color:#FFF;border-radius:10px;
}

Em #00ccff, coloque a cor do fundo do tooltip.

Bom, com isso, o CSS já está formado. Agora, onde queira colocar o tooltip, coloque isto:

  • Para links:
<a href="link" onmouseover="tooltip.show('O QUE QUER QUE APAREÇA');" onmouseout="tooltip.hide();">
  • Para imagens:
<img src="link da imagem" onmouseover="tooltip.show('O QUE QUER QUE APAREÇA');" onmouseout="tooltip.hide();">
  • Para iFrames:
<span onClick="changeNavigation('nome do iframe')" onmouseover="tooltip.show('O QUE QUER QUE APAREÇA');" onmouseout="tooltip.hide();">

Bom, é isso. Se usar dê like e, se puder, credite.

Tutorial por mands;