24.03.2025

Suporte para Conteúdo HTML no Tooltip do jQuery UI: Uma Solução

Resposta Rápida

Para garantir que suas tooltips criadas com jQuery UI consigam exibir HTML, você precisará utilizar a opção content. Isso permite que você passe o código HTML diretamente ou extraia valores do atributo title:

$(".selector").tooltip({
  content: function() {
    return "<strong>Bem-vindo</strong> ao mundo dos <em>tooltips</em>!";
  }
});

Com essa opção, você pode colocar código HTML nas tooltips para elementos com a classe .selector. Agora suas tooltips têm a capacidade de implementar HTML!

No entanto, junto a esse recurso, é essencial priorizar a segurança do usuário e sanitizar o código HTML para prevenir ataques XSS:

$(".selector").tooltip({
  content: function() {
    // Sim, somos os Houdinis do HTML, sanitizando o código!
    return $("<div>").text(this.getAttribute("title")).html();
  }
});

Modo Stealth: Capacidades Secretas

Revelando os Segredos do Tooltip

Para aprimorar a funcionalidade de suas tooltips, atualize para as versões jQuery 1.9.1 e jQueryUI 1.10.2. Antes de habilitar o suporte HTML nas tooltips, verifique a compatibilidade das versões do jQuery e do jQueryUI que você está usando. Para manter o sigilo das tooltips e evitar interferências no comportamento padrão do atributo title, utilize o atributo data-tooltip:

$(".selector").tooltip({
  content: function() {
    // Como revelar um segredo em um jogo!
    return $(this).data("tooltip");
  }
});

Protegendo sua "Reserva de Ouro"

Suas tooltips contêm informações importantes. Elas precisam ser protegidas de ataques XSS: assegure-se de que seus dados estão sanitizados e seguros. Utilize a função jQuery.text() ou a biblioteca DOMPurify para sanitizar o conteúdo.

Gerenciando Widgets de Tooltip

Quer mostrar seu profissionalismo em programação? Experimente sobrescrever o método .widget() para seu tooltip:

$.widget("custom.enhancedTooltip", $.ui.tooltip, {
  _create: function() {
    this._super();
    // Insira a música de super-herói aqui
  },
  _setOption: function(key, value) {
    if (key === "content" && typeof value === "string") {
      // Bingo! Estamos sanitizando o conteúdo!
      value = this._escapeHtml(value);
    }
    this._super(key, value);
  },
  _escapeHtml: function(string) {
    // Você está pronto? Temos apenas 60 segundos para sanitizar!
  }
});

$(".selector").enhancedTooltip();

Visualização

Você consegue imaginar como seria o código visual?

Vamos transformar os **símbolos** em um formato legível:

________________________
|                      |
|    Apenas texto!     |
|______________________|

Tem alguma ideia personalizada? É hora de desbloquear vastas possibilidades!

________________________
|                      |
|   *Estrela* & <em>Brilhos</em>  |
|   **Palco Principal**       |
|______________________|

Tooltips não podem existir no vácuo – elas precisam de conteúdo de qualidade!

O Absoluto e=mc² para Conteúdo Dinâmico

Para tooltips que mudam seu conteúdo com base no contexto, use uma função que retorne o conteúdo necessário:

$(".selector").tooltip({
  content: function() {
    // O mago transforma tooltips do nada!
    return "<div class='tooltip-content'>" + $(this).data('dynamicContent') + "</div>";
  }
});

Estilizando Tooltips

Estilize suas tooltips personalizando adequadamente .ui-tooltip com CSS para torná-las únicas.

Colocando em Prática: Arena de Código

Teste suas tooltips para estabilidade em diversos navegadores.

Recursos Úteis

1. Widget Tooltip | Documentação da API do jQuery UI – o recurso oficial para informações sobre tooltips no jQuery UI.
2. Como Usar a Fábrica de Widgets | Centro de Aprendizado jQuery – mergulhe nos pensamentos dos criadores do jQuery!
3. Tooltip | jQuery UI – lições virtuais dos mestres da área te aguardam aqui.
4. JqueryUI - Tooltip – um guia passo a passo que ensinará você a transformar tooltips em verdadeiras obras de arte.

Video

Navigation