2011-10-28 16 views
7

hay alguna posibilidad de hacer una función js onclick, que si alguien hace clic en ese icono automáticamente se mostrará el texto del título, o cuando alguien mueve el mouse sobre él, el título se mostrará sin ningún ¿retrasar? En este momento, el título del elemento sale después de 1 segundo.emergencias de título automáticamente sin demora

+0

posible duplicado de [Cambiar la rapidez con que aparezca una sugerencia del atributo "title"] (http: // stackoverflow. com/questions/9150796/change-how-fast-title-attributes-tooltip-aparece) –

Respuesta

3

No podrá anular el comportamiento predeterminado del navegador de cómo muestra la información sobre herramientas que contiene el texto de atributo title, pero puede seguir los pasos de esta otra pregunta para mostrar y ocultar un div que contiene el texto relevante (el enfoque usa jQuery y se ocupa de desplazarse, pero agregar un controlador click no es muy exagerado).

jQuery Hide/Show with Slide on Hover... better way to do this?

14

puede probar esto, css puro, sin JS:

HTML:

<div class="hover"> 
    Hover Me 
    <div class="tooltip"> 
     Tooltip goes here 
    </div> 
</div>​ 

CSS:

.hover{ 
    border:1px solid black; 
    text-align:center; 
    width:150px; 
    position:relative; 
} 

.tooltip{ 
    display:none; 
    position:absolute; 
    border:1px solid red; 
    border-radius: 5px; 
    padding:5px; 
    top:-10px; 
    left:200px; 
    width: 300px; 
} 

.hover:hover .tooltip{ 
    display:block; 
}​ 

http://jsfiddle.net/kamil335/qGTUc/

9

I just answered the same question

Tendrá que crear su propia información sobre herramientas. No es necesario JavaScript, CSS puro es suficiente:

.tooltip { 
 
    display: none; 
 
    position: absolute; 
 
    background: #ffe; 
 
    border: 1px solid #eed; 
 
    border-radius: 4px; 
 
    padding: 2px 4px; 
 
} 
 
:hover + .tooltip { 
 
    display: block; 
 
} 
 
body { font-family: sans-serif; }
<div>Hover for tooltip</div> 
 
<span class="tooltip">Tooltip text goes here</span>

jsfiddle.net/v655C

Cuestiones relacionadas