आइकन

Question

पर एक ट्विटर बूटस्ट्रैप टूलटिप जोड़ने के लिए कैसे मैं ट्विटर बूटस्ट्रैप से एक आइकन तत्व में दायां-टूलटिप जोड़ूंगा।

<h3>Sensors Permissions <i class="icon-info-sign"></i></h3> 

मुझे लगता है कि, जब कर्सर आइकन खत्म हो गया है, कुछ जानकारियां साथ एक सही टूलटिप दिखाया गया है कि ...

मैं कैसे कर सकते हैं:

कोड है? यह पर्याप्त नहीं है tooltip.js librery और आइकन कोड में एक तत्व डाल दिया? मैं उलझन में हूं।

धन्यवाद।

<i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i> 

कौन सा पैदा करता है:

आप का उपयोग कर इसे की घोषणा के द्वारा टूलटिप और अन्य सुविधाओं (देरी आदि) की स्थिति सेट

Answer 1

मैं हाल ही में इस तरह का उपयोग किया है जेएस:

$(document).ready(function(){ 
    $("[rel=tooltip]").tooltip({ placement: 'right'}); 
}); 

जैसा कि टिप्पणियों में बताया गया है, आप f अन्य अन्य विशेषताएँ/विकल्प here।

Answer 2

आप .tooltip() के साथ अपने टूलटिप्स को प्रारंभ करना भूल सकते हैं।

.tooltip() फ़ंक्शन को प्रत्येक तत्व पर बुलाया जाना चाहिए जिसे आप टूलटिप श्रोता रखना चाहते हैं। यह प्रदर्शन उद्देश्यों के लिए है। आप एक गुच्छा, एक माता पिता पर समारोह को फोन करके एक ही बार में प्रारंभ कर सकते हैं ताकि तरह: $('.tooltip-group').tooltip()

View the initialize function on one element on JSFiddle.

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

$(document).ready(function() { 
    $('#example').tooltip(); 
}); 

मार्कअप

<h3> 
    Sensors Permissions 
    <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i> 
</h3> 

Answer 3

@ nickhar का जवाब, data-toggle="tooltip" का उपयोग कर बूटस्ट्रैप 2.3.2 और 3.0 के साथ परीक्षण किया गया:

<i class="icon-ok-sign" data-toggle="tooltip" title="Key active" id="blah"></i> 

पैदा करता है कौन सा:

आप js का उपयोग कर इसे की घोषणा के द्वारा टूलटिप और अन्य सुविधाओं (देरी आदि) की स्थिति को सेट करें:

$(document).ready(function(){ 
    $("[data-toggle=tooltip]").tooltip({ placement: 'right'}); 
}); 

के रूप में टिप्पणी में उल्लेख किया है, आप अन्य गुण/विकल्प here पा सकते हैं।

Answer 4

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

$(function() { 
    $(".has-tooltip-right").tooltip({ placement: 'right'}); 
    $(".has-tooltip-left").tooltip({ placement: 'left'}); 
    $(".has-tooltip-bottom").tooltip({ placement: 'bottom'}); 
    $(".has-tooltip").tooltip(); 
}); 

एचटीएमएल

<a href="#" class="has-tooltip-bottom" title="" data-original-title="Tooltip">This link</a> 
and <a href="#" class="has-tooltip" title="" data-original-title="Another link">that link</a>