ट्विटर बूटस्ट्रैप के टूलटिप्स की चौड़ाई और ऊंचाई को कैसे बदलते हैं?

163

मैंने ट्विटर बूटस्ट्रैप का उपयोग करके टूलटिप बनाई।

टूलटिप तीन लाइनों के साथ प्रदर्शित हो रहा है। हालाँकि, मैं टूलटिप को केवल एक लाइन के साथ प्रदर्शित करना चाहूंगा।

मैं टूलटिप की चौड़ाई कैसे बदलूं? क्या यह ट्विटर बूटस्ट्रैप या खुद टूलटिप्स के लिए विशिष्ट है?

twitter-bootstrap tooltip

— onejigtwojig
स्रोत

1

क्या आप शायद इसका उत्तर स्वीकार कर सकते हैं? इससे दूसरों को भी मदद मिलेगी।

— मेरोस

210

बस bootstrap.css को ओवरराइड करें

BS2 में डिफ़ॉल्ट मान अधिकतम-चौड़ाई है: 200px; इसलिए आप इसे अपनी जरूरतों के हिसाब से बढ़ा सकते हैं।

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

— वैलेन्टिन डेस्पा
स्रोत

13

max-widthमेरे लिए काम नहीं करता है, लेकिन widthकरता है। क्रोम और IE9 पर परीक्षण किया गया। कोई सुराग?

— रोजी कासिम

2

मेरे मामले में, अधिकतम-चौड़ाई और चौड़ाई दोनों को सेट करना अच्छी तरह से काम करता है ।tooltip-inner अधिकतम-चौड़ाई (200px) से कम था, हालांकि इसमें बहुत सारे ग्रंथ थे।

— नोबू

बस इस तरह महत्वपूर्ण जोड़ो यह अधिकतम चौड़ाई काम करेगा: 350px! महत्वपूर्ण;

— सोहेल अनवर

1

किसी के पास अभी भी समस्याएँ हैं max-widthऔर नीचे @ knobli का उत्तर नहीं दिखता है, कृपया data-container="body"अपने HTML तत्व में उपयोग करें।

— kips15

CSS को संशोधित करना अंतिम उपाय होना चाहिए। Jquery टूलटिप की उपस्थिति को बदलने के लिए कार्यक्षमता प्रदान करता है इसलिए इसका उपयोग क्यों न करें?

— ई 10

42

बीएस 3 पर

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

— शिना
स्रोत

28

मुझे एहसास है कि यह एक बहुत पुराना सवाल है, लेकिन अगर मैं यहाँ उतरा, तो दूसरे भी। इसलिए मुझे लगा कि मैं वजन कर रहा हूं।

यदि आप चाहते हैं कि टूलटिप केवल एक पंक्ति के लिए उत्तरदायी हो, भले ही आप उसमें कितनी भी सामग्री जोड़ लें, चौड़ाई लचीली होनी चाहिए। हालाँकि, बूटस्ट्रैप टूलटिप को एक चौड़ाई में आरंभ करता है, इसलिए आपको कम से कम यह घोषित करना होगा कि वह चौड़ाई क्या होगी और इसे उस आकार से ऊपर की ओर लचीला बना देगा। यह वही है जो मैं सुझाता हूं:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

min-widthएक प्रारंभिक आकार की घोषणा करता है। अधिकतम-चौड़ाई के विपरीत, जैसा कि कुछ अन्य सुझाव देते हैं, जिसे वह एक स्टॉपिंग चौड़ाई घोषित करता है । आपके प्रश्न के अनुसार, आपको अंतिम चौड़ाई की घोषणा नहीं करनी चाहिए या आपका टूलटिप सामग्री अंततः उस बिंदु पर लपेट जाएगी। इसके बजाय, आप एक अनंत चौड़ाई या लचीली चौड़ाई का उपयोग करते हैं। max-width: 100%;यह सुनिश्चित करेगा कि एक बार टूलटिप 100px चौड़ी शुरू हो जाने के बाद, यह आपके कंटेंट की मात्रा की परवाह किए बिना आपकी सामग्री को बढ़ाएगा और समायोजित करेगा।

KDP IN MIND टूलटिप में बहुत अधिक सामग्री ले जाने का इरादा नहीं है। यह फंकी दिख सकता है यदि आपके पास पूरे स्क्रीन पर एक लंबा स्ट्रिंग है। और यह निश्चित रूप से आपके उत्तरदायी विचारों, विशेष रूप से स्मार्टफोन (320px चौड़ाई) में प्रभाव डालेगा।

मैं इसे सही करने के लिए दो समाधान सुझाऊंगा:

अपने टूलटिप सामग्री को न्यूनतम तक रखें ताकि 320px से अधिक चौड़ा न हो। और यहां तक कि अगर आप ऐसा करते हैं, तो आपको यह याद रखना चाहिए कि क्या आपके पास टूलटिप स्क्रीन के दाईं ओर रखा गया है और साथ हैdata-placement:right , आपकी टूलटिप सामग्री स्मार्टफ़ोन में दिखाई नहीं देगी (इसलिए बूटस्ट्रैप ने शुरू में उन्हें इसकी सामग्री के लिए उत्तरदायी होने के लिए डिज़ाइन किया है और इसे करने की अनुमति क्यों है रैप)
यदि आप इस एक लाइन टूलटिप अवधारणा का उपयोग करने में नरक हैं, तो @mediaस्मार्टफोन दृश्य को फिट करने के लिए अपने टूलटिप को रीसेट करने के लिए क्वेरी का उपयोग करके अपने छह को कवर करें । ऐशे ही:

मेरा डेमो यहाँ सामग्री आकार और उपकरण प्रदर्शन आकार के अनुसार टूलटिप्स पर लचीलापन और जवाबदेही प्रदर्शित करता है

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

— LOTUSMS
स्रोत

23

आपको अपनी स्वयं की सीएसएस का उपयोग करके गुणों को अधिलेखित करना चाहिए। इस तरह:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

चयनकर्ता डिव का चयन करता है कि टूलटिप आयोजित होता है (टूलटिप जावास्क्रिप्ट द्वारा जोड़ा जाता है और यह आमतौर पर किसी कंटेनर से संबंधित नहीं होता है।

— nglinh
स्रोत

2

बस जिज्ञासु, क्या कोई विशेष कारण है कि आपने ओवरराइडिंग स्टाइल को 'div [class = "tooltip-inner"] "के रूप में परिभाषित किया है और सरल' div.tooltip-inner 'के रूप में नहीं?

— slawek

6

मैंने उन कोड को तब लिखा था जब मैं CSS के लिए बहुत नया था इसलिए मुझे याद नहीं है कि किस हास्यास्पद कारण से मैंने इसे इस तरह लिखा है

— nglinh

21

"महत्वपूर्ण" के साथ अधिकतम-चौड़ाई को परिभाषित करें! और डेटा-कंटेनर = "बॉडी" का उपयोग करें

सीएसएस फ़ाइल

.tooltip-inner {
    max-width: 500px !important;
}

HTML टैग

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

जेएस लिपि

$('.tooltiplink').tooltip();

— knobli
स्रोत

18

data-container="body"अकेले ही मेरे लिए किया। धन्यवाद!

— इज़्हाकी

17

चौड़ाई की समस्या को ठीक करने के लिए, निम्न कोड का उपयोग करें।

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

उदाहरण: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

— 戈晓伟
स्रोत

4

मेरी राय में सबसे अच्छा जवाब क्योंकि इसमें बूटस्ट्रैप सीएसएस बदलना शामिल नहीं है।

— टिम स्कारबोरो

1

यह मेरे लिए सबसे अच्छा जवाब है, लेकिन यह इस सवाल का जवाब नहीं देता है

— बंगाला

यह सबसे अच्छा उपाय है जो मुझे लगता है। यह सीएसएस बूटस्ट्रैप ओवरराइड के बजाय टूलटिप कॉन्फ़िगरेशन का उपयोग करता है।

— सेसर लियोन

यह FAAAR द्वारा सबसे अच्छा जवाब है। Jquery टूलटिप में सभी प्रकार की चीजों को करने के लिए कार्यक्षमता प्रदान करता है, इसलिए इसका उपयोग क्यों न करें? CSS को संशोधित करना अंतिम उपाय होना चाहिए।

— E10

10

एक और समाधान; CSS में एक नया वर्ग (जैसे टूलटिप-वाइड) बनाएँ:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

इस वर्ग का उपयोग उन तत्वों पर करें जहाँ आप व्यापक टूलटिप्स चाहते हैं:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

बूटस्ट्रैप टूलटिप टूलटिप वाले तत्व के नीचे मार्कअप उत्पन्न करता है, इसलिए HTML वास्तव में मार्कअप उत्पन्न होने के बाद कुछ इस तरह दिखता है:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

CSS का उपयोग आसन्न तत्व (+) से .tooltip-wide तक पहुँचने के लिए किया जाता है, और वहाँ से अधिकतम-चौड़ाई विशेषता को लागू करने से पहले .tooltip-inner में नेविगेट करता है। यह केवल .tooltip-wide वर्ग का उपयोग करने वाले तत्वों को प्रभावित करेगा, अन्य सभी टूलटिप्स अनल्टेड रहेंगे।

— कर रहे हैं
स्रोत

2

महान समाधान क्योंकि आप चुन सकते हैं कि आप किस टूलटिप्स का उपयोग करना चाहते हैं।

— विल शॉनबर्गर

1

बूटस्ट्रैप 4 में, टूलटिप को शरीर से जोड़ा जाता है। हालांकि, के साथ

data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"

और .tooltip-wide { max-width: 100%; min-width: 80%; }यह काम करने के लिए मिल सकता है।

— मट्टियो फेरला

यह पहला वास्तविक जीवन का उदाहरण है जिसे मैंने बीएस 4 टूलटिप्स के साथ टेम्प्लेट का उपयोग करके देखा है। अच्छा डेमो और साथ ही साथ कस्टम कक्षाओं को जोड़ने में आसानी।

— क्लेविस

8

आप .tooltip-inner css क्लास को bootstrap.css में संपादित कर सकते हैं। डिफ़ॉल्ट अधिकतम-चौड़ाई 200px है। आप अपने इच्छित आकार में अधिकतम-चौड़ाई बदल सकते हैं।

— onejigtwojig
स्रोत

चौड़ाई को समायोजित करने के लिए यह बहुत अच्छा है! धन्यवाद! यह ऊपर दिए गए उत्तर के साथ पूर्ण समाधान है!

— एटीएसईएम

6

जैसा कि @nglinh ने कहा: "यह वास्तव में अनुशंसित नहीं है"। आप बूटस्ट्रैप को अपडेट करते समय अपने सभी हैक का ट्रैक नहीं रखना चाहते हैं।

— वैलेंटाइन देस्पा

7

कुछ प्रयोग करने के बाद, इसने मेरे लिए सबसे अच्छा काम किया:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

— Xerus
स्रोत

6

max-widthअपनी आवश्यकताओं के अनुसार जो कुछ भी हो , डिफ़ॉल्ट को ओवरराइड करें ।

.tooltip-inner {
  max-width: 350px;
}

जब अधिकतम-चौड़ाई काम नहीं करती है (विकल्प 1)

यदि अधिकतम-चौड़ाई काम नहीं करती है, तो आप इसके बजाय सेट चौड़ाई का उपयोग कर सकते हैं। यह ठीक है, लेकिन आपके टूलटिप्स अब पाठ को फिट करने के लिए आकार परिवर्तन नहीं करेंगे। यदि आपको वह पसंद नहीं है, तो विकल्प 2 पर जाएं।

.tooltip-inner {
  width: 350px;
}

सही ढंग से छोटे कंटेनरों से निपटना (विकल्प 2)

चूंकि बूटस्ट्रैप टूलटिप को लक्ष्य के भाई-बहन के रूप में जोड़ता है, इसलिए यह युक्त तत्व से विवश है। यदि युक्त तत्व आपके से छोटा है max-width, तोmax-width काम नहीं करेगा।

तो, जब max-widthकाम नहीं करता है, तो आपको बस बदलने की जरूरत है container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

प्रो टिप: कंटेनर कोई भी चयनकर्ता हो सकता है, जो तब अच्छा होता है जब आप केवल कुछ टूलटिप्स पर शैलियों को ओवरराइड करना चाहते हैं।

— एंसन
स्रोत

4

क्लास को मुख्य टूलटिप डिव और इनर टूलटिप के लिए सेट करें

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

— कनिष्ठ
स्रोत

क्या यह न्यूनतम-चौड़ाई नहीं होनी चाहिए?

— रिप्पो

4

कृपया नीचे पोस्ट को देखें। cmcculloh के जवाब ने मेरे लिए काम किया। https://stackoverflow.com/posts/31683500/edit

जैसा कि दस्तावेज़ में संकेत दिया गया है , यह सुनिश्चित करने का सबसे आसान तरीका है कि आपके टूलटिप का उपयोग करने के लिए बिल्कुल भी लपेटना नहीं है

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

इसके साथ, आपको आयाम मूल्यों या उस जैसी किसी भी चीज़ के बारे में चिंता करने की ज़रूरत नहीं है। मुख्य समस्या यह है कि यदि आपके पास पाठ की एक लंबी लंबी रेखा है तो यह केवल स्क्रीन से दूर जाएगी (जैसा कि आप JSBin उदाहरण में देख सकते हैं )।

— राजशेखर कालीसामी
स्रोत

2

BS3:

.tooltip-inner { width:400px; max-width: 400px; }

— हेस तक
स्रोत

2

बूटस्ट्रैप 4 पर, और यदि आप सभी टूलटिप्स की चौड़ाई को बदलना नहीं चाहते हैं, तो आप जो टूलटिप आप चाहते हैं उसके लिए विशिष्ट टेम्पलेट का उपयोग कर सकते हैं:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

— विन्सेंट डेकाक्स
स्रोत

1

इस कोड को आज़माएं,

.tooltip-inner {
     max-width:350px !important;
}

— रागस लमीर
स्रोत

1

मेरे पास एक ही समस्या थी, हालांकि सभी लोकप्रिय जवाब - .tooltip-inner{width}मेरे काम को बदलने के लिए काम सही करने में विफल रहा। अन्य (यानी कम) टूलटिप्स के लिए निश्चित चौड़ाई बहुत बड़ी थी। टूलटिप्स के zilions के लिए अलग-अलग html टेम्प्लेट / क्लास लिखने में मैं आलसी था, इसलिए मैंने  प्रत्येक टेक्स्ट लाइन में शब्दों के बीच सभी स्पेस को बदल दिया ।

— Ignas
स्रोत

1

मुझे कुछ टूलटिप्स की चौड़ाई को समायोजित करने की आवश्यकता थी। लेकिन समग्र सेटिंग नहीं। इसलिए मैंने यह करना समाप्त कर दिया:

सीएसएस

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

एचटीएमएल

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

— Julesezaar
स्रोत

0

मेरे लिए क्लास टूलटिप- इनडर्न के काम की अधिकतम-चौड़ाई निर्धारित करना , मैं बूटस्ट्रैप 3.2 का उपयोग कर रहा हूं

यदि आप पैरेंट क्लास की चौड़ाई सेट करते हैं तो केवल अधिकतम-चौड़ाई सेट करने का कार्य कैसे किया जाता है (.tooltip) ।

लेकिन फिर सभी टूलटिप्स आपके द्वारा निर्दिष्ट आकार बन जाते हैं। तो यहाँ मेरा समाधान है:

मूल वर्ग में चौड़ाई जोड़ें:

.tooltip {
  width:400px;
}

फिर आप अधिकतम-चौड़ाई जोड़ते हैं और डिस्प्ले को इनलाइन-ब्लॉक में बदलते हैं, इसलिए यह पूरे स्थान पर कब्जा नहीं करेगा

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

— डैनियल
स्रोत

यह टूलटिप के संरेखण के साथ अराजकता पैदा करता है।

— बेन

0

मेरा जहां सभी परिवर्तनीय लंबाई और एक निर्धारित अधिकतम चौड़ाई मेरे लिए काम नहीं करेगी इसलिए मेरी सीएसएस को 100% पर सेट करना एक आकर्षण की तरह काम करता है।

.tooltip-inner {
    max-width: 100%;
}

— शॉन
स्रोत

0

बूटस्ट्रैप 4 के साथ मैं उपयोग करता हूं

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

— विशमास्टर
स्रोत

-1

बूटस्ट्रैप 3.0.3 में आप इसे पॉपओवर क्लास को संशोधित करके कर सकते हैं

.popover {
    min-width: 200px;
    max-width: 400px;
}

— Ekim
स्रोत

3

.Popover वर्ग टूलटिप पर लागू नहीं होता है।

— एड्रियन टिजसेलिंग