jQuery यूआई टूलटिप विजेट

मैं jQuery यूआई Tooltip widget jQuery यूआई टूलटिप विजेट

<li> 
    <div class="i1"> 
     <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ"> 
      <span class="ui-icon ui-icon-search"></span> 
     </a> 
    </div> 
</li> 
<li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li> 
<li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li>

और उपयोग कर रहा हूँ की अधिभावी सीएसएस शैलियों मैं उनके उदाहरण के आधार पर निम्न सीएसएस लिखा था और यह एक आकर्षण की तरह काम करता है:

.tooltip { 
    display:none; 
    background: black; 
    font-size:12px; 
    height:10px; 
    width:80px; 
    padding:10px; 
    color:#fff; 
    z-index: 99; 
    bottom: 10px; 
    border: 2px solid white; 
/* for IE */ 
    filter:alpha(opacity=80); 
    /* CSS3 standard */ 
    opacity:0.8; 
}

लेकिन मुझे 3-4 टूलटिप्स मिलते हैं जिन्हें मैं अलग दिखाना चाहता हूं (ऊपर उदाहरण उदाहरण एचटीएमएल की तरह) इसलिए मैंने उन्हें कक्षा के अंदर लपेट लिया और यह किया:

.i1 .tooltip { 
    display:none; 
    background: red; 
    font-size:12px; 
    height:40px; 
    width:80px; 
    padding:20px; 
    color:#fff; 
    z-index: 99; 
    bottom: 10px; 
    left: 50px important!; 
    border: 2px solid white; 
/* for IE */ 
    filter:alpha(opacity=80); 
    /* CSS3 standard */ 
    opacity:0.8; 
}

जो बिल्कुल कुछ भी नहीं करता है। कुछ टूलटिप्स को अलग-अलग अनुकूलित करने के लिए मैं जेनेरिक .tooltip को ओवरराइड कैसे कर सकता हूं?

अग्रिम

स्रोत

2011-01-24 elasticrash

रैपिंग से आपका क्या मतलब है, एक व्यापक तत्व है या टूलटिप पर लागू एक और वर्ग है? –

वर्तमान स्वीकृत उत्तर बहुत पुराना है और लिंक मर चुका है। मौजूदा कामकाजी जानकारी –

नई टूलटिप विजेट (jQuery यूआई 1.9.1) के लिए एक कस्टम वर्ग लागू करने के लिए देख रहे लोगों के लिए धन्यवाद, extraClass अब और काम करने के लिए प्रतीत नहीं होता है, लेकिन वहाँ tooltipClass नामक एक नया विकल्प है।

$('.selector').tooltip({ 
     tooltipClass: "your_class-Name", 
});

आदेश jQuery के सीएसएस के साथ संभावित टकराव को संबोधित करने के अलावा, आप अपने सीएसएस में लाइनों के अंत करने के लिए !important जोड़ने की जरूरत हो सकती है। धन्यवाद उनका कहना है कि :-)

स्रोत

2012-10-27 21:00:37

के लिए नीचे दिए गए उच्चतम वोट किए गए उत्तर को देखें मेरी खुशी :- डी (विशेष रूप से यदि यह किसी को उस समय बचा सकता है जो इसे मेरे लिए समझने के लिए लिया गया था ;-)) –

यह समाधान काम नहीं करता है। – FredTheLover

से नीचे मेरा समाधान देखें यह नई कक्षा जोड़ता है लेकिन कोई शैली नहीं बदलता है! –

के लिए @sisharp को वास्तव में अपने

$(".selector").tooltip("option", "tooltipClass", "custom-tooltip-styling");

देखें here

स्रोत

2013-06-21 19:14:08 FredTheLover

यह उपरोक्त जैसा ही है। आपके द्वारा प्रदान किया गया लिंक दोनों दिखाता है ... – sisharp

ऊपर उत्कृष्ट जवाब पर निर्माण करने के लिए कोशिश कर रहा है, मैं बुलबुला शैली और प्राप्त करने के लिए कोशिश कर रहा था पुराने से छुटकारा पाएं ...

यदि आप मेरे जैसे नौसिखिया हैं (अन्य लोगों में, सरल कार्य में घंटों लगते हैं), तो एक ही स्थान पर एक ही समय में जवाब देना अच्छा लगता है :) इस प्रश्न सहित दो स्रोतों का समाधान यहां दिया गया है:

<a href="#" title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>

अवधि ब्राउज़र बबल को हटा देती है।

उदाहरण के रूप में नया बुलबुला के लिए सीएसएस:

.mytooltip:hover:after{ 
    background: #333; 
    background: rgba(0,0,0,.9); 
    border-radius: 5px; 
    bottom: 26px; 
    color: rgb(255, 77, 85); 
    content: attr(title); 
    right: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 220px;} 
.mytooltip:hover:before{ 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 20px; 
    content: ""; 
    right: 50%; 
    position: absolute; 
    z-index: 99; 
} 

.mytooltip { 
    radius: 4px !important; 
    background-color: black; 
    color: rgb(255, 77, 85) !important; 
    padding: 5px 20px; 
    border-radius: 20px; 
    margin: 50px; 
    text-align: center; 
    font: bold 14px ; 
    font-stretch: condensed; 
    text-decoration: none; 
    box-shadow: 0 0 10px black; 
}

और उल्लेख ऊपर स्क्रिप्ट, पाद लेख पर डाला:

<script> 
$('.selector').tooltip({ 
     tooltipClass: "mytooltip", 
}); 
</script>

इस सवाल का धन्यवाद, this और मैं अन्य स्रोत भूल गया ।

स्रोत

2016-09-28 21:43:50 user2060451

मैंने ऊपर दिए गए सभी विकल्पों की कोशिश की और मेरे लिए कोई भी काम नहीं किया।

मैं टूलटिप options docs जो theming के बारे में इस लेख से जुड़ा हुआ में देखा, इसे पढ़ने के बाद मैं इस जो काम करने की कोशिश की:

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

तो बस अपने स्टाइल के साथ 2 सीएसएस वर्गों जोड़ें:

my-custom-class-name { 
... 
} 
my-custom-class-name-content { 
... 
}

ध्यान दें कि आपको अपने कस्टम वर्गों में महत्वपूर्ण उपयोग करना होगा!

स्रोत

2017-05-17 23:01:03 AmitF

jQuery यूआई टूलटिप विजेट

उत्तर

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