बूटस्ट्रैप टूलटिप को सिंगल लाइन

Question

में होना आवश्यक है मैंने ड्रॉपडाउन नियंत्रण के लिए बूटस्ट्रैप का उपयोग करके टूलटिप बनाया है। यह टूलटिप दिखाता है। लेकिन चूंकि यह नियंत्रण class="col-sm-4" के अंदर बाध्य है क्योंकि टूलटिप टेक्स्ट नई लाइनों में टूटा हुआ है। लेकिन मैं इसे एक पंक्ति में दिखाने की उम्मीद करता हूं। इसे बनाने का कोई विचार?

<div class="col-sm-4"> 
       <select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" title="Some tooltip 2!Some tooltip 2!Some "> 
      <option value="08">08 -Year 8 or below</option> 
    <option value="09">09 -Year 9 or equivalent</option> 
    <option value="10">10 -Completed Year 10</option> 
    <option value="11">11 -Completed Year 11</option> 
    <option value="12">12 -Completed Year 12</option> 
    <option selected="selected" value="">--Not Specified--</option> 
      </select><br/> 
</div> 

Answer 1

.tooltip-inner { 
    white-space:nowrap; 
    max-width:none; 
} 

बूटस्ट्रैप सीएसएस के बाद अपने सीएसएस करने के लिए इस जोड़ें। हालांकि, दाईं ओर होवर का उपयोग करके, यहां तक ​​कि सही ऑटो, छोटे व्यूपोर्ट्स पर स्क्रीन बंद हो जाएगा, लेकिन चूंकि छोटे व्यूपोर्ट आमतौर पर स्पर्श होते हैं, इसलिए होवर इसे काम करने के लिए डबल टैप की आवश्यकता बना सकते हैं। मैं आमतौर पर आईओएस, एंड्रॉइड और विंडोज मोबाइल के लिए स्पर्श का पता लगाने के लिए एक स्क्रिप्ट का उपयोग करता हूं और फिर केवल टचटिप डिवाइस का उपयोग नहीं करता, इसलिए यह उपयोगकर्ता नल में हस्तक्षेप नहीं करता है।

Answer 2

हालांकि क्रिस्टीना का जवाब काम करता है, यह केवल समस्या को पैच करता है और अन्य समस्याएं कहीं और बना सकता है।

बटन समूहों, इनपुट समूहों में टूल टिप्स, और तालिकाओं विशेष एक .btn-समूह या एक .input-समूह के भीतर तत्वों पर टूलटिप्स का उपयोग करते समय स्थापित करने की आवश्यकता होती है, या मेज पर: बूटस्ट्रैप प्रलेखन में यह उल्लेख किया गया है इस -संबंधित तत्वों, आपको टूलटिप ट्रिगर होने पर अवांछित साइड इफेक्ट्स (जैसे तत्व बढ़ते व्यापक और/या अपने गोलाकार कोनों को खोने वाले तत्व) से बचने के लिए container: 'body' विकल्प निर्दिष्ट करना होगा।

Bootstrap docs

देख तो तुम सब करने की जरूरत है ताकि तरह container: 'body' जोड़ने है:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({container: 'body'})} 
); 

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