Tooltips customizados com Tooltipster

Published: 2019-08-04, Updated: 2019-08-04

Hoje iremos ver como criar tooltips customizados com um plugin jQuery chamando Tooltipster, a grande vantagem de usar um plugin como esse são todos os recursos já prontos que ele traz, veremos os exemplos:

Fazendo um tooltip simples

A forma mais simples de fazer um tooltip usando essa biblioteca é assim

HTML

<img src="https://dummyimage.com/200/000/ccc" class="tooltip tooltipstered" title="Tooltip Simples">

JS

$(function() {
	$('.tooltip').tooltipster();
});

Configurando as bibliotecas necessárias

<link rel="stylesheet" type="text/css" href="https://rawgit.com/iamceege/tooltipster/4.2.5/dist/css/tooltipster.bundle.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/louisameline/tooltipster-follower/0.1.5/dist/css/tooltipster-follower.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://rawgit.com/iamceege/tooltipster/4.2.5/dist/js/tooltipster.bundle.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/louisameline/tooltipster-follower/0.1.5/dist/js/tooltipster-follower.min.js"></script>

Tooltip que segue o mouse

HTML

<img src="https://dummyimage.com/200/000/ccc" class="follow-image-custom-content tooltipstered">
<div style="display:none">
	<div class="custom-content">
		<img src="https://dummyimage.com/50/000/ff0000"> Conteúdo customizado
	</div>
</div>

CSS

$(function(){
	$('.follow-image-custom-content').tooltipster({
		content: $('.custom-content'),
		plugins: ['follower'],
		theme: 'tooltipster-light',
		delay: 50
	});
})

Exemplo de tooltip seguindo o mouse com css customizado

tooltip.html

<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://rawgit.com/iamceege/tooltipster/4.2.5/dist/css/tooltipster.bundle.min.css">
	<link rel="stylesheet" type="text/css" href="https://rawgit.com/louisameline/tooltipster-follower/0.1.5/dist/css/tooltipster-follower.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script type="text/javascript" src="https://rawgit.com/iamceege/tooltipster/4.2.5/dist/js/tooltipster.bundle.min.js"></script>
	<script type="text/javascript" src="https://rawgit.com/louisameline/tooltipster-follower/0.1.5/dist/js/tooltipster-follower.min.js"></script>
	<style>
	.tooltipster-meu-tema .tooltipster-content {
			background: red;
			border: 3px solid green;
			color: silver;
		}
		
		.tooltipster-follower.tooltipster-meu-tema .tooltipster-box {
			border: 3px solid green;
		}
	</style>
	<script>
		$(function(){
			$(".imagem").tooltipster({
				plugins: ['follower'],
				content: $('.conteudo-customizado'),
				theme: 'tooltipster-meu-tema',
				delay: 3000
			});
		})
	</script>
</head>
<body>
	<img src="https://dummyimage.com/200/000/ccc" class="imagem tooltipstered" title="Minha imagem">
	<div style="display:none">
		<div class="conteudo-customizado">Meu conteudo <b>isso estah em negrito</b></div>
	</div>
</body>
</html>

E esses foram os exemplos, para vê-los funcionando basta clicar aqui ou aqui no jsfiddle

Referência


Usando Docker Swarm How to deploy your first dependency to Maven Central

Comments