2012-03-22 21 views
5

के लिए माउसओवर/हॉवर पर प्रदर्शन मैं पाठ के अंदर के साथ एक एचटीएमएल td तत्व है। मैं यह चाहता हूँ ताकि आप उस तत्व पर होवर कर सकते हैं और सक्रिय पेज/तत्व समझा क्या है कि टीडी टैग की सामग्री के साधन के शीर्ष पर एक पाठ बॉक्स प्रदर्शित करते हैं। कुछ प्रकार का विस्तार। <abbr> टैग की तरह।पाठ बॉक्स 'पॉपअप' सीएसएस/जावास्क्रिप्ट

इस सीएसएस या जावास्क्रिप्ट में किया जा सकता है?

उत्तर

9

यह सीएसएस के साथ संभव है, यह भी जावास्क्रिप्ट के साथ। एक तत्व के साथ एक तालिका बनाएं:

<table> 
<tr><td> 
    <a href="#">Info 
     <div class="tooltipcontainer"> 
      <div class="tooltip">Here some info</div> 
     </div> 
    </a> 
</td></tr> 
</table> 

सीएसएस:

/* Container is necessary because td cannot be positioned relative */ 
td .tooltipcontainer { 
    position: relative; 
} 
td .tooltip { 
    display: none; 
    position: absolute; 
    /* More positioning, heigh, width, etc */ 
} 
td a:hover .tooltip { 
    display: block; 
} 

आप 'जानकारी' पर होवर करते हैं यह class = 'टूलटिप' के साथ div में पाठ दिखाई देगा। जावास्क्रिप्ट (उदाहरण के लिए किसी भी jQuery टूलटिप प्लगइन) में अधिक विकल्प के साथ समाधान हैं।

+0

यह वह जगह है सकते हैं usabilit के लिए बेहतर होगा y tbh – mickburkejnr

+0

धन्यवाद। यह वह सीएसएस समाधान था जिसे मैं ढूंढ रहा था। मुझे लगता है कि जावास्क्रिप्ट समाधान के अधिक लाभ हैं। – DextrousDave

2

मैंने पहले Tooltip JS का उपयोग किया है। यह वास्तव में अच्छा काम करता है और मुझे लगता है कि यह आपके लिए फायदेमंद होगा।

+0

धन्यवाद, यह एक शांत समाधान – DextrousDave

3

उदाहरण मार्कअप ..

<td id="1">..</td> 
<td id="2">..</td> 
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td> 

सीएसएस शैली

.visible { 
    display:block; 
} 

.hidden { 
    display:none; 
} 

आप

$('#thisiswhatiwanttohaveahover').hover(function() { 
    if ($(this + ' .tooltip').hasClass('hidden')) { 
    $(this + ' .tooltip').removeClass('hidden'); 
    $(this + ' .tooltip').addClass('visible'); 
    } 
    if ($(this + ' .tooltip').hasClass('visible')) { 
    $(this + ' .tooltip').removeClass('visible'); 
    $(this + ' .tooltip').addClass('hidden'); 
    } 
}); 

आशा है कि यह मदद करता है ..

+0

धन्यवाद, यह एक अच्छा जेएस समाधान की तरह दिखता है। इसे – DextrousDave

+0

सुनिश्चित करने की कोशिश करेंगे .. खुशी है कि मैंने मदद की :) –

संबंधित मुद्दे