Entrar | Registrar | FAQ
Anonymous

Problem with CSS in effect Tooltip

+ Postar uma resposta

4 Mensagens Página 1 de 1


Problem with CSS in effect Tooltip

por Bruno Bezerra » Qua Mar 25, 2015 2:47 pm

Hello everybody!

I made this topic in order to solve a question on the style of a Tooltip effect. A few months ago, I discovered how much this effect is important for websites and blogs, as well as being very dynamic, replace the tags '' abbr '' / acronym for a good free way.

I did the effect, but had problems when testing it. I realized that when I put it in a static page, the box appears even without touching the mouse, it may be a problem with the CSS code.

Picture of the effect:

Imagem

Now, I will send the CSS code, and then the HTML.

CSS:

Código: Selecionar tudo
<style>
.tooltip {
    display: inline-block;
    height: 17px;
    border-bottom: 1px dotted #133783;
    cursor: help;
}
.tooltip a.word {
    font-weight: normal;
    color: #133783;
}
.tooltip:hover {
    color: #133783;
    border: none;
    height: auto;
}
#tooltip {
    position: absolute;
    margin-left: -20px;
    padding: 30px 10px 10px;
    z-index: 999;
}
#tooltip .container {
    border: 1px solid #133783;
    background-color: #E3E3E3;
    font-size: 13px !important;
    text-align: left !important;
    max-width: 300px;
    padding: 8px;
    display: block;
    cursor: auto;
}

#tooltip .container .label {
    color: #133783;
    text-transform: uppercase;
    font-family: Arial;
    font-size: 11px !important;
}

#tooltip .footer {
    cursor: auto;
    height: 16px;
    background-color: #133783;
    padding: 11px 45px 11px 11px;
    text-align: right;
    display: block;
    background-position: 285px -694px;
    background-repeat: no-repeat;
}

#tooltip .arrow {
    display: block;
    position: absolute;
    width: 26px;
    height: 13px;
    background-position: -41px -666px;
    margin: -21px 0 0 10px;
}

#tooltip .footer a {
    font-weight: normal !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    text-transform: uppercase;
}
</style>


HTML:

Código: Selecionar tudo
<span class="tooltip" rel="i393"><span id="tooltip"><span class="container"><span class="arrow spr8"></span><span class="label">HTML</span>: HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.</span><span class="footer spr8"></span></span>HTML</span>


To enhance the real reason to do this topic; I wonder how can I hide this Tooltip box by CSS?
Avatar de usuário

Bruno Bezerra

  • Mensagens: 16
  • Data de registro: Qua Mar 26, 2014 8:31 pm
  • Localização: Brasil.

Re: Problem with CSS in effect Tooltip

por nanoverso » Qui Mar 26, 2015 12:53 am

Essa questão é mais adequada para o fórum em língua inglesa.
Avatar de usuário

nanoverso

  • Mensagens: 252
  • Data de registro: Sáb Mai 10, 2014 12:08 am
  • Localização: Brazil
--
Mario Blog (Portuguese): https://jogosdomariosuperbros.blogspot.com

Re: Problem with CSS in effect Tooltip

por Bruno Bezerra » Qui Mar 26, 2015 11:34 am

nanoverso escreveu:Essa questão é mais adequada para o fórum em língua inglesa.


nanoverso, agradeço por ter avisado! Já entrei em contato com o Andreas explicando o fato ocorrido, e pedi a remoção do tópico. Irei repostar o tópico na seção mais adequada. Obrigado.
Avatar de usuário

Bruno Bezerra

  • Mensagens: 16
  • Data de registro: Qua Mar 26, 2014 8:31 pm
  • Localização: Brasil.

Re: Problem with CSS in effect Tooltip

por XainPro » Sáb Mar 28, 2015 11:18 am

use jquery built-in tool-tip it's easy to use
you can find it's code here
https://jqueryui.com/tooltip/
Avatar de usuário

XainPro

  • Mensagens: 3933
  • Data de registro: Sex Fev 17, 2012 8:10 pm


+ Postar uma resposta

Página 1 de 1