Como fazer Tooltips com o MoreCSS

Semana passada fiz um post falando sobre o MoreCSS e disse que daria um exemplo ensinando a fazer Tooltip, demorei mas não esqueci. Fazer Tooltips com o MoreCSS é muito fácil.

Vamos aos códigos:

Coloque dentro do head da sua página:

	<script type="text/javascript" src="MoreCSS.js"></script>
	<link rel="morecss" href="MoreCSS.css" />

Os arquivos estão disponíveis aqui: MoreCSS.js e MoreCSS.css.

Adicione a formatação da tooltip no seu css :

	.Tooltip { width: 200px;}
	.Tooltip .content { padding: 10px; background-color: #000; color: #444; }

E dentro do MoreCSS.css você coloca:

a.exemploTooltip {
	tooltip: '<div class="content">%title</div>';
	tooltip-class: Tooltip;
	tooltip-opacity: 0.8;
}

Monte o html:

	<a class="examploTooltip" href="http://www.tidbits.com.br/" title="Unindo o útil ao desagradável">
		Tidbits - Internet e vida a 2
	</a>

E vejam o exemplo: Tidbits – Internet e vida a 2

O MoreCSS pode não ser completo como os melhores frameworks javascript, mas sua sintaxe assemelhando o css ajuda muito para aqueles que não tem familiaridade com javascript.

Mais funcionalidades podem ser vistos na página do plugin.

Você pode se interessar também por:

One Response to “Como fazer Tooltips com o MoreCSS”

1
Devin Helmers Says:
August 30th, 2010 at 1:04 pm
Fantastic post! This could aid a whole lot of people discover this matter. Do you need any help producing these? I would not have any doubt to help out. Your reason was spot on and owing to you; I almost surely will not ought to tell every single little thing to my buddies. I can just direct them below. I can’t determine what do I do in order tosubscribe for the comments by way of feedburner. I wish to keep on major of this, precisely how do I achieve that?My website is Killer Guitars