2011-10-28 13 views
7

czy jest szansa na wykonanie funkcji js onclick, że jeśli ktoś kliknie na tę ikonę automatycznie pojawi się tekst tytułu, lub po prostu gdy ktoś przesunie na nią mysz, tytuł zostanie wyświetlony bez żadnego opóźnienie? W tej chwili tytuł elementu pojawia się po 1 sek.Wyskakujące tytuły automatycznie bez opóźnień

+0

możliwe duplikat [Zmiana jak szybko pojawia się podpowiedź atrybutu "title"] (http: // stackoverflow. com/questions/9150796/change-how-fast-title-attributes-tooltip-appear) –

Odpowiedz

3

Nie można zastąpić domyślnego zachowania przeglądarki polegającego na wyświetlaniu podpowiedzi zawierających tekst atrybutu title, ale można wykonać kroki z tego drugiego pytania, aby pokazać i ukryć div zawierający odpowiedni tekst (podejście używa jQuery i zajmuje się najechaniem, ale dodanie obsługi click nie jest zbyt dużym rozciągnięciem).

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

14

można spróbować tego, czystym CSS, bez 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

Będziesz musiał stworzyć własną etykietkę. Nie trzeba JavaScript, CSS jest wystarczająco czysta:

.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

Powiązane problemy