Bubble Tooltips

Artigo de Alessandro Fulciniti, traduzido por Cláudio Júnior.
Cerca de dois anos atrás no site pro.html.it eu escrevi um artigo de como construir um tooltips puro em CSS, e naquela época me certifiquei de acrescentar um pouco de DOM para manter o uso semântico.
Recentemente eu estava fuçando com uma variação, um quase puro Javascript+CSS que se aproximam das tarefas nomeadas, estão mais claramente separadas: interação para javascript, apresentação para CSS. O artigo original do Bubble Tooltips foi publicado em italiano, e estou apresentando uma tradução para o português.

Bubble Tooltips é um modo fácil para acrescentar (por um pouco de CSS e Javascript) um “fantástico” tooltips em forma de balão em qualquer página. Antes de nós iniciarmos, veja o que este tooltips faz, através do link abaixo, apenas passe o mouse em cima de qualquer link para ver a ação.
Exemplo do Bubble Tootips
Eles funcionam desta maneira:

  1. Verifica se existe um suporte DOM.
  2. Se encontrar, a tag title e href dos links são extraídos da página e serão inseridos dentro da estrutura DOM.
  3. Quando o mouse é rolado em cima do link, o tooltip relacionado (estilizado com CSS) é mostrado.

Para inserir e modificar o Bubble Tooltips é bastante fácil. Eles são composto principalmente de quatro partes:

  • Um pequeno arquivo javascript de 2kb
  • Um pequeno CSS para sua apresentação
  • Uma imagem simples no formato gif para suas imagens
  • Quatro linhas de HTML na seção head da(s) página(s).

O javascript, o CSS e a imagem tem apenas de ser copiados para o mesmo diretório da(s) página(s) e com a apresentação padrão não será necessário mudar.
As linhas que devem ser inseridas na seção head estão abaixo:

window.onload=function(){enableTooltips()};

Uma nota importante: o CSS para os tooltips, nomeado bt.css é acrescentado dinamicamente pelo javascript, caso o navegador seja capaz de suportar DOM. Se você for modificar o arquivo, apenas se certifique de manter o nome citado.

Uma característica que eu pensei que poderia ser útil é a habilidade para acrescentar o tooltips a uma seção particular, identificada por um id. Então aqui está o segundo exemplo, onde o tooltips é acrescentado apenas na seção principal do conteúdo, isto é o div id=”content”. Como você pode ver, só são exibidos tooltips na coluna esquerda. As mudanças do primeiro exemplo são mínimas, aqui estão as linhas necessárias para o cabeçalho:

window.onload=function(){enableTooltips(“content”)};
Na terceira linha eu coloquei em negrito a única parte que deveria ser modificada para ajustar as suas necessidades - é o id (entre aspas) do elemento que vai conter as ligações dos links.

Agora vamos ver mais de perto como os tooltips funcionam. Um tipo de remarcação invisível é acrescentado à página com a ajuda do DOM quando o mouse rolado em cima de um link. A remarcação gerada está assim:


title of the link
url of the link, max 30 chars

Cada um destes elementos span e b são por padrão refeitos no nível de bloco, e o tooltip são posicionados através de javascript de acordo com a posição de mouse. O resto do CSS é bastante simples e usa uma única imagem:

.tooltip,.tooltip *{display:block} /*added by javascript*/

.tooltip{ width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
background: url(bt.gif) no-repeat bottom}

Para sua conveniência, eu preparei uma pequena página com um tooltip permanente na remarcação assim seria mais fácil personalizar a aparência com CSS. Quando você estiver terminado, apenas tenha certeza do nome do arquivo CSS é “bt.css”. Outra coisa para notar é que um pedaço claro de transparência é acrescentado ao tooltips através de javascript: isto funciona em IE de 5.5 ou superior, Firefox e Safári.

Finalmente um pouco de palavras sobre compatibilidade: bubble tooltips poderá ter problemas com alguns navegadores que tenha um mau suporte DOM ou incapacitado de executar javascript, o título evidente de links será exibido. Compatibilidade boa: foram testados com sucesso em IE5, IE5.5 e IE6 em Windows, Opera 8.5, Safari 2.0 e Firefox 1.5. Você pode fazer download de exemplos, código e imagens em formato zip. Divirta-se!

Artigo em italino: http://pro.html.it/articoli/id_697/idcat_11/pro.html
Artigo em inglês: http://web-graphics.com/mtarchive/001717.php

2 comments so far

  1. remi de souza on

    Olá, primeiro queria agradecer pelo otimo assunto dos tooltips, me ajudou um monte, mas queria ver se voçe poderia me ajudar.No site ( http://www.electricprism.com/aeron/slideshow+1 ) tem um otimo exemplo de tooltip com animação, se voçe olhar o código fonte da pagina tem para download os arquivos utilizados neste tooltip (http://www.electricprism.com/aeron/file_download/5/bubbles.zip ), o problema que não tem como é configurado o link da pagina para funcionar este tooltip.
    Agradeço deste ja se voçe puder me ajudar…

  2. Carla on

    Eu fiquei tão frustrada. NENHUM, absolutamente NENHUM desses links funcionam.


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: