लिस्टबॉक्स विकल्प पर ट्विटर बूटस्ट्रैप पॉपओवर और टूलटिप्स गलत जगह में दिखाए गए तत्व

Question

मैंने समस्या का प्रदर्शन करने के लिए त्वरित jsFiddle सेटअप किया है।

किसी भी टूलटिप या किसी चुनिंदा सूची के विकल्प तत्व पर बूटस्ट्रैप से पॉपओवर का उपयोग करते समय, पॉपओवर या टूलटिप आइटम के बगल में नहीं दिखाता है, बल्कि पृष्ठ के चरम ऊपरी बाईं ओर दिखाई देता है।

एचटीएमएल मैं उपयोग कर रहा हूँ है:

<select size="5" id="testList"> 
    <option value="1" rel="popover" data-original-title="This is item 1." data-content="Lots of stuff to say" style="color: red; ">Item 1</option> 
    <option value="2" rel="popover" data-original-title="This is item 2." data-content="Lots of stuff to say" style="color: green; ">Item 2</option> 
    <option value="3" rel="popover" data-original-title="This is item 3." data-content="Lots of stuff to say" style="">Item 3</option> 
    <option value="4" rel="popover" data-original-title="Blah" data-content="Lots of stuff to say" style="color: orange; ">Item 4</option> 
</select>​ 

javascript कॉल कर रहा है सरल:

$(function() { 
    $('#testList option[rel=popover]').popover({ 
     placement: 'right', 
     trigger: 'hover' 
    }); 
}); ​ 

क्या मैं इसे सही जगह में दिखाई बनाने के लिए कर सकते हैं?

Answer 1

यह उम्मीद है। टीबी tooltip/popover संबंधित तत्वों offsetWidth और offsetHeight के आधार पर उनकी स्थिति की गणना करता है। विकल्प में ऐसी गुण नहीं हैं, कभी नहीं है, इसलिए popover हमेशा खेत के body बाएं/शीर्ष से संबंधित कुछ चीज़ों में समाप्त हो जाएगा।

हालांकि, आप select के लिए एक पॉपओवर रख सकते हैं। चयन के लिए mouseover बाध्य करें, उस शो से option के लिए डेटा विशेषताओं के साथ पॉप-अप के दायीं तरफ पॉपअप करें। इसलिए पॉपओवर गायब हो जाता है जब हम चुनिंदा

छोड़

एचटीएमएल, rel="popover" के लिए साफ और "data-original-title"

<select size="4" id="testList"> 
<option value="1" data-title="This is item 1." data-content="Lots of stuff to say 1" style="color:red;">Item 1</option> 
<option value="2" data-title="This is item 2." data-content="Lots of stuff to say 2" style="color:green;">Item 2</option> 
<option value="3" data-title="This is item 3." data-content="Lots of stuff to say 3" style="">Item 3</option> 
<option value="4" data-title="Blah" data-content="Lots of stuff to say 4" style="color:orange;">Item 4</option> 
</select>​​ 

बाँध माउसओवर, विकल्प डेटा-attribues, शो पॉपओवर

$("#testList").on('mouseover', function(e) { 
    var $e = $(e.target); 
    if ($e.is('option')) { 
     $('#testList').popover('destroy'); 
     $("#testList").popover({ 
      trigger: 'manual', 
      placement: 'right', 
      title: $e.attr("data-title"), 
      content: $e.attr("data-content") 
     }).popover('show'); 
    } 
}); 

कुछ सफाई इकट्ठा

$("#testList").on('mouseleave', function(e) { 
    $('#testList').popover('destroy'); 
}); 

नहीं लगता कि यह बहुत शर्त लगाया जा सकता है एक विकल्प सूची के लिए ter :) आप template के साथ संघर्ष कर सकते हैं, जिससे पॉपओवर को इसके सूचकांक द्वारा प्रत्येक विकल्प के लिए लंबवत स्थिति का पालन करने के लिए मजबूर किया जा सकता है। खिड़कियों पर IE और क्रोम के साथ मुद्दों -

कोड http://jsfiddle.net/mM8sx/

---

अद्यतन काँटेदार।
मैंने इस जवाब के कुछ संदर्भ देखे हैं, यह इंगित करते हुए कि यह आईई और विंडोज़ पर क्रोम में काम नहीं कर रहा था। यह इस तथ्य के कारण है कि विंडोज़ पर, <option> तत्वों को माउस ईवेंट बिल्कुल प्राप्त नहीं होते हैं। उपर्युक्त उत्तर का "हैक" यहां है, इसे "क्रॉसब्रोसर" बना रहा है।

विंडोज पर क्रोम, एफएफ, आईई और सफारी के साथ सफलतापूर्वक परीक्षण किया गया। उबंटू पर क्रोम, एफएफ और ओपेरा। विचार विकल्प clientY/विकल्प के ऊंचाई पर आधारित सूचकांक की गणना करके mousemove (माउसओवर नहीं) पर सही <option> को लक्षित करना है।

$("#testList").on('mousemove', function(e) { 
    if (!isWindows) { 
     var $e = $(e.target); 
    } else { 
     var newIndex = Math.floor(e.clientY/optionHeight); 
     if (newIndex === index) return; 
     index = newIndex; 
     $e = $(this).find('option:eq('+index+')'); 
    }  
    if ($e.is('option')) { 
     $('#testList').popover('destroy'); 
     $("#testList").popover({ 
      trigger: 'manual', 
      placement: 'right', 
      title: $e.attr("data-title"), 
      content: $e.attr("data-content") 
     }).popover('show'); 
    } 
}); 

जानकारी के लिए बेला देख ->http://jsfiddle.net/LfrPs/

Answer 2

भाग्य के बिना एक ड्रॉप-डाउन बॉक्स के लिए एक ही पॉपओवर बॉक्स लागू करने के लिए बहुत मेहनत की कोशिश की:

1. ऐसा लगता है कि किसी भी स्थिति नहीं है की तरह एक ड्रॉप डाउन चयन के भीतर विकल्प तत्वों के लिए बिल्कुल आग लगती है।
2. 'चयन' तत्व पर होवर ईवेंट का e.target हमेशा चुनिंदा तत्व होगा! कोई विकल्प नहीं है कि आप 'विकल्प' टैग का संदर्भ प्राप्त कर सकें जो कि हो रहा है।
3. मैंने टेक्स्ट को 'विकल्प' तत्व में 'span' तत्व में लपेटने का प्रयास किया है और उस 'span' तत्व में 'होवर' या 'माउसओवर' ईवेंट श्रोता जोड़ने का प्रयास किया है। यह या तो काम नहीं करता है।

जब सूची में ड्रॉप डाउन को बदलें, (यानी आकार = "xx" विशेषता जोड़ना), विकल्प तत्व सामान्य तत्वों के रूप में काम कर सकते हैं। मुझे एक ड्रॉप डाउन बॉक्स में संदेह है, ब्राउज़र द्वारा एक अलग परत में सभी विकल्प लपेटे जाते हैं। किसी चयनित तत्व के आंतरिक तत्वों के साथ कोई बातचीत की अनुमति नहीं है। कृपया मुझे बताएं कि क्या मैं गलत हूं।