Custom Tooltip JavaScript and jQuery

by Elvis de Freitas

HTML

<script src="https://rawgit.com/iamceege/tooltipster/4.2.5/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/iamceege/tooltipster/4.2.5/dist/css/tooltipster.bundle.min.css">
<link rel="stylesheet" href="https://rawgit.com/louisameline/tooltipster-follower/0.1.5/dist/css/tooltipster-follower.min.css">
<script src="https://rawgit.com/louisameline/tooltipster-follower/0.1.5/dist/js/tooltipster-follower.min.js"></script>
<h3>Tooltip simples</h3>
<img src="https://dummyimage.com/200/000/ccc" class="tooltip" title="This is my image's tooltip message!" />
<br/>

<h3>Seguindo o mouse</h3>
<img src="https://dummyimage.com/200/000/ccc" class="follow-image" title="This is my image's tooltip message!" />

<h3>Seguindo o mouse com conteúdo customizado</h3>
<img src="https://dummyimage.com/200/000/ccc" class="follow-image-custom-content"  />

<div class="templates">
  <div class="custom-content">
    <img src="https://dummyimage.com/50/000/ff0000" /> Conteúdo customizado
  </div>
</div>

<h2>Mais exemplos</h2>
<ul>
  <li><a href="http://iamceege.github.io/tooltipster/#demos">Página com exemplos</a></li>
  <li><a href="http://iamceege.github.io/tooltipster/doc/js/scripts.js">Código JS</a></li>
  <li><a href="view-source:http://iamceege.github.io/tooltipster/">Código HTML</a></li>
  <li><a href="http://iamceege.github.io/tooltipster/#styling">documentação</a></li>
</ul>

CSS

* {
  font-family: Ubuntu, Courier New
}

.templates {
  display: none;
}

JavaScript

$(function() {

	// tooltip simples
  $('.tooltip').tooltipster();
  
  // seguindo o mouse
  $('.follow-image').tooltipster({
  	plugins: ['follower'],
    theme: 'tooltipster-light',
    delay: 50
  });
  
  // seguindo o mouse com conteudo customizado
  $('.follow-image-custom-content').tooltipster({
  	content: $('.custom-content'),
  	plugins: ['follower'],
    theme: 'tooltipster-light',
    delay: 50
  });
  
});