Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!
Estive tentando instalar o tooltip Tipsy em meu site, mas não entendi direito as explicações no site do desenvolvedor. Gostaria de saber se alguém aqui já usou ele e qual o procedimento certo para a instalação e configuração do mesmo.
Obrigado.
Obs.: Link para o Tipsy.
Lembrando que para funcionar perfeitamente você precisa aplicar os estilos ao box no qual o tooltip inserido.
Aqui um exemplo básico:
/ tipsy /
.tipsy { padding: 5px; font-size: 16px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; }
.tipsy-arrow { position: absolute; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
#gravity { width: 100%; margin: 5px 0; border-spacing: 5px; }
#gravity td { text-align: center; vertical-align: middle; padding: 5px 0; background-color: #d0d0d0; width: 33%; }
#gravity a { }
#gravity a:hover { color: #505050; background: none; }
Você chama os arquivos do plugin na página e chama um link por exemplo:
Cria um title para aparecer no quadrado escuro:
<a id='north-west' href='#' title='This is an example of north-west gravity'>Northwest</a>
no javascript, você joga o ID do elemento
$('#north-west').tipsy();
simples!