Tooltip que segue o cursor

Detalhes da questão

Endereço do fórum: https://redcarpetrpg.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Oi gente, já vi em fóruns um efeito em que o tooltip segue o cursor e eu não achei nenhum tutorial que me entregasse resultado semelhante.

Eu vi nesse fórum

https://rewritethestarsbemine.jcink.net/ que embora seja jcink já vi também em forumeiros

Olá @Mirotic,

Crie uma nova página JavaScript com investimento em todas as páginas

Código:

$(function(){
  // general options for editing the tooltip
  // see more : http://iamceege.github.io/tooltipster/#options
  var options = {
    animation : 'fade',
    arrow : true,
    speed : 300,
    delay : 300,
    onlyOne : true,
    theme : 'tooltipster-default'
  },
 
  // delay execution by placing the function into another queue
  // helps with applying to other JS created elements such as the editor
  queue = true,
  titles,
 
  parse = function() {
    titles = $('[title]');
    titles.tooltipster && titles.not('[title=""], .mentiontag, .tooltipstered').tooltipster(options);
  };
 
  queue ? $(parse) : parse();
});

Atenciosamente,
pedxz.

@pedxz funcionou amigo, obrigado.

Só gostaria de saber se tem como personalizar o title, e mante-lo visível seguindo o cursor enquanto ativo (enquanto o cursor está sobre o elemento)?

@Mirotic: Altere o código acima para

Código:

(function($) {
    'use strict';

    $(function() {

        $.getScript('https://static.tumblr.com/1vwpqwc/Kixmls5t4/jquery.style-my-tooltips.js')
            .done(function(context) {
                $("[title]").style_my_tooltips({
                    tip_follows_cursor: true,
                    tip_fade_speed: 100,
                    tip_delay_time: 10,
                });
            })
            .fail(function() {
                console.warn('Erro a carregar o Style-my-tooltips jQuery plugin');
            });
    });
})(jQuery);

adicione na folha de estilo

Código:

#s-m-t-tooltip{
  /* basic */
  max-width:300px;
  z-index:10;
  margin:24px 14px 7px 12px;
  /* style and design */
  padding:8px;
  background:#222; /* fallback if rgba not supported */
  background:rgba(0,0,0,0.8);
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  /* font */
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  line-height:16px;
  color:#fff;

Cara! Muito obrigado, funcionou muito bem! Você é demais!