Botón con toolTip abre toopTip en over

[ceaped]

Buenos días
Tengo el siguiente botón:

HTML:

Código HTML:

<div class="item_btn_1">
    <a href="unidad_1.html">
    <div class="titulo_btn_1">Unidad 1</div>
</a></div>
 

CSS:

Código CSS:

.item_btn_4 a{
    background-color: #F9A63E;
    background-image: url(../images/unidad_4.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 80px;
    height: 80px;
    position: absolute;
    opacity: 100;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    margin: 88px;
    float: left;
    }
 
.item_btn_4 a:hover {
    background-color: #FBBD71;
    }
 
 
.titulo_btn_4{
    font-family: Arial;
    color: #FFF;
    background-color: #F9A63E;
    text-align: center;
    width: 225px;
    margin-top: 85px;
    margin-left: -160px;
    position: absolute;
    z-index: -9999;
    opacity: 0;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    }
 

Cuando paso el puntero sobre el área que se abre el toolTip (titulo_btn_4) se abre directamente el toolTip, cuando sólo se debería abrir cuando paso el puntero sobre el botón (item_btn_4). Osea queda como zona activa el título.

¡Cómo hago para que no quede activo el título toolTip y que sólo se abra cuando pase el puntero por el botón?

Gracias por su ayuda

[C2am]

Primero, no veo ningún elemento con la clase xxx_4, pero sí con la xxxx_1, así que supongo que solo se trata de un error de tipeo.

Luego, suponiendo lo anterior, en ningún momento declaras el display:none; a "titulo_btn_1"(o "titulo_btn_4), con lo cual siempre estará visible.

Además la propiedad opacity,(que supongo es el que usas para que no sea visible) si no recuerdo mal varia de 0 a 1. http://librosweb.es/css_avanzado/cap...parencias.html

Te dejo un ejemplo muy básico:
http://jsfiddle.net/c2am/MH9Nk/19/embedded/result/

Sería mejor que te expliques mejor porque no logro entenderte del todo.
Saludos

[ceaped]

Hola C2am
Gracias por tu ayuda
Si tienes razón en tus 2 observaciones:

1. "titulo_btn_4" y "item_btn_4"
2. opacity: 1; ó opacity: 0;

Te plateo mejor lo que me pasa.

Cuando hacer RoolOver sobre el botón "item_btn_4" abre un texto abajo del botón y si haces RollOut se oculta el texto, hasta aquí todo bien, el asunto está cuando paso el puntero sobre el área donde está el texto, se abre el texto cuando solo se debería abrir cuando se have RollOver sobre el botón.

Espero me entiendas y gracias por tu ayuda

[pzin]

Ya te dijeron que es porque ese botón nunca se oculta, y por lo tanto sigue estando ahí. Si le cambias la opacidad, sigue ahí.

[ceaped]

Hola pzin
Gracias por tu ayuda
El asunto es que el sí se oculta, a lo que me refiero es que el "texto" en zona activa cuando paso el mouse por ahí también se abre. Si pasas el mouse por afuera del círculo también se activa.

ejemplo

Gracias por su ayuda

[pzin]

A ver si así...

Que la opacidad del elemento sea igual a cero, o en otras palabras, que sea totalmente transparente, no hace que se oculte, por lo que seguirá ahí.

[C2am]

Y le agregaría a lo dicho por pzin, que en realidad no haces hover sobre el tooltip sino sobre su contenedor, ya que aunque no se vea el tooltip hace que el espacio que ocupa (que con display:none no tendría) aumente el espacio de su contenedor.

Ocultando el tooltip con opacity:0 (selecciona la 2 linea y verás)
------------------------------------------------------
| item sobre el cual hacer hover
| AQUI ESTOY
-------------------------------------------------------


Mostrando el tooltip con opacity:1
--------------------------------------------------
| item sobre el cual estoy haciendo hover
| AQUI ESTOY
--------------------------------------------------


Ocultando el tooltip con display:none
--------------------------------------------------
| item sobre el cual hacer hover
--------------------------------------------------

Mostrando el tooltip con display:block
--------------------------------------------------
| item sobre el cual estoy haciendo hover
| AQUI ESTOY
--------------------------------------------------


En realidad debería hacerte un ejemplito pero bue, hace demasiado calor.