$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<a class="btn btn-outline-secondary" data-toggle="tooltip" title="Title" data-placement="left" href="#" alt="EMAIL">
  <img src="email-icon.png" width=100 height=100 >
</a>

मुझे लगता है कि मैंने यहां पर अन्य पोस्ट सहित सब कुछ करने की कोशिश की है।

मैंने अपने अनुभाग की शुरुआत में एक स्क्रिप्ट जोड़ी है जो इस प्रकार है:

और मैं अपने बटन में एक टूलटिप जोड़ने का प्रयास कर रहा हूं जो इस तरह दिखता है:

और यह बिल्कुल कुछ नहीं करता है। मैंने सभी प्रासंगिक .js फाइलें जोड़ दी हैं, और केवल एक चीज जो मैं सोच सकता हूं वह यह है कि शायद यह तथ्य कि मैं बूटवॉच सीएसएस का उपयोग कर रहा हूं, इसे गड़बड़ कर सकता है? कृपया सहायता कीजिए!

0
sburbanacademia 11 मार्च 2020, 07:28

3 जवाब

आपका कोड सही है लेकिन डिफ़ॉल्ट लेफ्ट साइड पोजीशन हिडिंग शो प्रदर्शित नहीं हुआ। आशा है कि यह आपकी मदद करता है।

  $('[data-toggle="tooltip"]').tooltip();
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a class="btn btn-outline-secondary" data-toggle="tooltip" title="Title" data-placement="left" href="#" alt="EMAIL">
                <img src="email-icon.png" width=100 height=100 >
            </a>
1
vadivel a 11 मार्च 2020, 07:50
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<a class="btn btn-outline-secondary" data-toggle="tooltip" title="Title" data-placement="left" href="#" alt="EMAIL">
  <img src="email-icon.png" width=100 height=100 >
</a>
1
chandu komati 11 मार्च 2020, 09:00

बूटस्ट्रैप 4 के साथ यह आसान है। नीचे उदाहरण देखें।

संदर्भ लिंक: https://getbootstrap.com/docs/4.3/components/tooltips/ #उदाहरण

आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं इसलिए उस संस्करण के अनुसार आवश्यक समर्थित मानकों का पालन करना चाहिए।

  $('[data-toggle="tooltip"]').tooltip()
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">
  Tooltip on bottom
</button>
0
Irfan K 11 मार्च 2020, 10:16