jQueryUI टूलटिप

Question

में लाइन को तोड़ने के लिए कैसे करें jQueryUI (1.9) का नया संस्करण देशी टूलटिप विजेट के साथ आता है। इसके साथ परीक्षण करने के बाद, यह ठीक काम करता है अगर सामग्री (शीर्षक विशेषता का मान) छोटा है। लेकिन यदि सामग्री लंबी है, तो टूलटिप, एक बार प्रदर्शित होने पर, इनपुट टेक्स्ट को ओवरलैप कर देगा।

आधिकारिक साइट पर a demo है।

जब आप उम्र पाठ आपका <input> पर माउस कर्सर मंडराना, टूलटिप पाठ इनपुट overlaps का प्रदर्शन किया। मुझे यकीन नहीं है कि यह विजेट का वांछित व्यवहार है या नहीं। मैं इसे टेक्स्ट इनपुट के दाईं ओर रहने और यदि आवश्यक हो तो ब्रेक लाइनों पर रहना चाहता हूं।

संपादित करें: डेमो पृष्ठ नहीं रह गया है मूल समस्या के बाद से डेमो jQueryUI v1.10 जिसमें स्थिति कोड बेहतर जगह पर अद्यतन किया गया था टूलटिप उपयोग करने के लिए अद्यतन किया गया है पता चलता - देख http://api.jqueryui.com/tooltip/#option-position

मैंने demo of the original problem on jsFiddle फिर से बनाया है।

Answer 1

टूलटिप के placement एक jQueryUI स्थिति वस्तु द्वारा नियंत्रित किया जाता है और डिफ़ॉल्ट सेटिंग्स हैं:

{ my: "left+15 center", at: "right center", collision: "flipfit" } 

Position वस्तु, विशेष रूप से collision विशेषता बदला जा सकता है कहीं और नियंत्रण की नियुक्ति के लिए मजबूर करने। टूलटिप्स के लिए डिफ़ॉल्ट फ्लिपfit का अर्थ है कि यदि डिफ़ॉल्ट (दाईं तरफ) फिट नहीं है तो बाईं ओर फ्लिप करें और उस स्थिति को आजमाएं और यदि यह किसी भी चीज़ से टकरा नहीं जाता है, तो फिट पर आज़माएं खिड़की के किनारे से दूर ले जाकर नियंत्रण। नतीजा यह है कि अब यह <input> के साथ टकराता है। चालाकी से लपेटने के लिए एक लंबे टूलटिप को मजबूर करने का विकल्प प्रतीत नहीं होता है।

रैपिंग के लिए मजबूर करने के लिए एक max-width साथ विन्यास के लिए एक कस्टम सीएसएस वर्ग जोड़ें, उदाहरण के लिए:

जावास्क्रिप्ट

$('input').tooltip({ 
    tooltipClass:'tooltip' 
}); 

सीएसएस

लेकिन वहाँ सामग्री रैप करने के लिए दो तरीके हैं

.tooltip { 
    max-width:256px; 
} 

या हार्ड लाइन-ब्रे शीर्षक विशेषता में अक्स <br/>, उदाहरण के लिए

title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit" 

संपादित करें: तो यह की तरह jQueryUI (the changelog के अनुसार) टूलटिप सामग्री v1.9 और v1.10 के बीच विकल्प बदल लग रहा है।

v1.9.2

content: function() { 
    return $(this).attr("title"); 
} 

v1: संदर्भ यहाँ के लिए अंतर है।

$('input').tooltip({ 
    content: function() { 
     return $(this).attr('title'); 
    } 
}); 

इसके अलावा, jsFiddle demo देखें: 10

content: function() { 
    // support: IE<9, Opera in jQuery <1.7 
    // .text() can't accept undefined, so coerce to a string 
    var title = $(this).attr("title") || ""; 
    // Escape title, since we're going from an attribute to raw HTML 
    return $("<a>").text(title).html(); 
} 

तो तुम वापस पुराने कार्यक्षमता .tooltip() इस तरह का उपयोग करके शीर्षक विशेषता में <br/> टैग से बच नहीं करता है डाल सकते हैं।

Answer 2

यह काम करता है:

एचटीएमएल

<div class="produtos"> 
    <div class="produtos_imagem"> 
     <img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descrição: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/> 
    </div> 
    <p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p> 
</div> 

जावास्क्रिप्ट

$(document).tooltip({ 
    content: function() { 
     var element = $(this); 
     if (element.is("[title]")) { 
      return element.attr("title"); 
     } 
    }, 
    position: { 
     my: "center bottom-20", 
     at: "center top" 
    } 
}); 

Answer 3

यह मेरी चाल नवीनतम jQuery के साथ यह करने के लिए/jQueryUI

यह assum है टूलटिप्स में सभी आइटम्स को क्लास 'jqtooltip' रखना है, उनके पास शीर्षक टैग हैं, और शीर्षक में लाइन विभाजक के लिए पाइप वर्ण है।

$('.jqtooltip').tooltip({ 
    content: function(callback) { 
    callback($(this).prop('title').replace('|', '<br />')); 
    } 
}); 

Answer 4

मेरे पास @ तारू के समाधान के समान jQuery 2.1.1 का समाधान है।

असल में, हमें तत्व से डेटा प्राप्त करने के लिए टूलटिप की सामग्री कॉल का उपयोग करना होगा। तत्व में स्वयं भी कोई HTML मार्कअप हो सकता है। ध्यान दें कि आप

आयात करने के लिए तो, ऑनलोड की जरूरत है, मैं यह कर:

$(function() { 
    $(document).tooltip({ 
     content:function(){ 
     return this.getAttribute("title"); 
     } 
    }); 
    }); 

और मेरे उदाहरण तत्व यह है:

<div title="first<br/>second<br/>">hover me</div>