मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
in English

टूलटिप्स

अ‍ॅनिमेशनसाठी CSS3 वापरून CSS आणि JavaScript सह सानुकूल बूटस्ट्रॅप टूलटिप्स जोडण्यासाठी दस्तऐवजीकरण आणि उदाहरणे आणि स्थानिक शीर्षक संचयनासाठी डेटा-बीएस-विशेषता.

या पृष्ठावर

आढावा

टूलटिप प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

  • टूलटिप स्थानासाठी तृतीय पक्ष लायब्ररी पॉपरवर अवलंबून असतात . तुम्ही bootstrap.js आधी popper.min.js समाविष्ट करणे आवश्यक आहे किंवा टूलटिप कार्य करण्यासाठी ज्यामध्ये Popper समाविष्ट आहे bootstrap.bundle.min.js/ वापरा !bootstrap.bundle.js
  • टूलटिप्स कार्यप्रदर्शन कारणांसाठी निवडल्या जातात, त्यामुळे तुम्ही त्या स्वतःच सुरू केल्या पाहिजेत .
  • शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.
  • container: 'body'अधिक जटिल घटकांमध्ये (जसे आमचे इनपुट गट, बटण गट इ.) रेंडरिंग समस्या टाळण्यासाठी न��र्दिष्ट करा .
  • लपविलेल्या घटकांवर टूलटिप ट्रिगर करणे कार्य करणार नाही.
  • .disabledरॅपर घटकावर किंवा disabledघटकांसाठी टूलटिप्स ट्रिगर केल्या पाहिजेत.
  • एकाहून अधिक ओळींचा विस्तार करणाऱ्या हायपरलिंक्सवरून ट्रिगर केल्यावर, टूलटिप केंद्रस्थानी राहतील. हे वर्तन टाळण्यासाठी white-space: nowrap;तुमच्या s वर वापरा .<a>
  • DOM मधून संबंधित घटक काढून टाकण्यापूर्वी टूलटिप लपविल्या पाहिजेत.
  • छाया DOM मधील घटकामुळे टूलटिप ट्रिगर केल्या जाऊ शकतात.
डीफॉल्टनुसार, हा घटक अंगभूत सामग्री सॅनिटायझर वापरतो, जो स्पष्टपणे परवानगी नसलेले कोणतेही HTML घटक काढून टाकतो. अधिक तपशीलांसाठी आमच्या JavaScript दस्तऐवजीकरणातील सॅनिटायझर विभाग पहा .
या घटकाचा अॅनिमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा .

ते सर्व मिळाले? छान, काही उदाहरणांसह ते कसे कार्य करतात ते पाहू या.

उदाहरण: सर्वत्र टूलटिप सक्षम करा

पृष्ठावरील सर्व टूलटिप सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-bs-toggleगुणधर्मानुसार निवडणे:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

उदाहरणे

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

टूलटिपसह काही इनलाइन लिंक्स प्रदर्शित करण्यासाठी प्लेसहोल्डर मजकूर . हे आता फक्त फिलर आहे, मारक नाही. वास्तविक मजकुराच्या उपस्थितीची नक्कल करण्यासाठी येथे सामग्री ठेवली आहे . आणि हे सर्व तुम्हाला वास्तविक-जगातील परिस्थितींमध्ये वापरताना टूलटिप कशा दिसतील याची कल्पना देण्यासाठी. त्यामुळे आशा आहे की , लिंक्सवरील या टूलटिप्स तुम्ही तुमच्या स्वतःच्या साइटवर किंवा प्रोजेक्टवर वापरल्यानंतर सरावात कशा प्रकारे कार्य करू शकतात हे तुम्ही पाहिले असेल.

चार टूलटिप दिशानिर्देश पाहण्यासाठी खालील बटणांवर फिरवा: वर, उजवीकडे, तळाशी आणि डावीकडे. आरटीएलमध्ये बूटस्ट्रॅप वापरताना दिशानिर्देश मिरर केले जातात.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

आणि सानुकूल HTML जोडले:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

SVG सह:

सस

चल

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

वापर

टूलटिप प्लगइन मागणीनुसार सामग्री आणि मार्कअप तयार करते आणि डीफॉल्टनुसार त्यांच्या ट्रिगर घटकानंतर टूलटिप ठेवते.

JavaScript द्वारे टूलटिप ट्रिगर करा:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ओव्हरफ्लो autoआणिscroll

जेव्हा मूळ कंटेनरमध्ये आमचे असते overflow: autoकिंवा overflow: scrollसारखे असते तेव्हा टूलटिप स्थिती स्वयंचलितपणे बदलण्याचा प्रयत्न करते .table-responsive, परंतु तरीही मूळ प्लेसमेंटची स्थिती ठेवते. याचे निराकरण करण्यासाठी, डीफॉल्ट मूल्य ओव्हरराइड करण्यासाठी कोणत्याही HTMLElement वर boundaryपर्याय (पर्याय वापरून फ्लिप मॉडिफायरसाठी ) सेट करा , जसे की :popperConfig'clippingParents'document.body

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

मार्कअप

टूलटिपसाठी आवश्यक मार्कअप ही केवळ एक dataविशेषता आहे आणि titleHTML घटकावर तुम्हाला टूलटिप हवी आहे. टूलटिपचे व्युत्पन्न केलेले मार्कअप अगदी सोपे आहे, जरी त्यास स्थान आवश्यक आहे (डिफॉल्टनुसार, topप्लगइनद्वारे सेट केलेले).

टूलटिप बनवणे कीबोर्ड आणि सहाय्यक तंत्रज्ञान वापरकर्त्यांसाठी कार्य करते

तुम्ही फक्त HTML घटकांमध्ये टूलटिप जोडल्या पाहिजेत जे पारंपारिकपणे कीबोर्ड-फोकस करण्यायोग्य आणि परस्परसंवादी आहेत (जसे की दुवे किंवा फॉर्म नियंत्रणे). जरी स्वैर HTML घटक (जसे की <span>s) विशेषता जोडून फोकस करण्यायोग्य केले जाऊ शकतात tabindex="0", हे कीबोर्ड वापरकर्त्यांसाठी गैर-परस्परसंवादी घटकांवर संभाव्य त्रासदायक आणि गोंधळात टाकणारे टॅब स्टॉप जोडेल आणि बहुतेक सहाय्यक तंत्रज्ञान सध्या या परिस्थितीत टूलटिप घोषित करत नाहीत. याव्यतिरिक्त, तुमच्या टूलटिपसाठी ट्रिगर म्हणून पूर्णपणे विसंबून राहू नका hover, कारण यामुळे कीबोर्ड वापरकर्त्यांसाठी तुमच्या टूलटिप ट्रिगर करणे अशक्य होईल.

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

अक्षम घटक

विशेषता असलेले घटक disabledपरस्परसंवादी नसतात, म्हणजे वापरकर्ते टूलटिप (किंवा पॉपओव्हर) ट्रिगर करण्यासाठी फोकस करू शकत नाहीत, फिरवू शकत नाहीत किंवा त्यावर क्लिक करू शकत नाहीत. वर्कअराउंड म्हणून, तुम्हाला रॅपरवरून टूलटिप ट्रिगर करायची आहे <div>किंवा <span>, वापरून आदर्शपणे कीबोर्ड-फोकस करण्यायोग्य बनवायचे tabindex="0"आहे.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-bs-प्रमाणे जोडा data-bs-animation="". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार CamelCase वरून कबाब-केसमध्ये बदलण्याची खात्री करा. उदाहरणार्थ, वापरण्याऐवजी data-bs-customClass="beautifier", वापरा data-bs-custom-class="beautifier".

लक्षात ठेवा की सुरक्षेच्या कारणास्तव डेटा विशेषता वापरून sanitize, sanitizeFnआणि allowListपर्याय पुरवले जाऊ शकत नाहीत.
नाव प्रकार डीफॉल्ट वर्णन
animation बुलियन true टूलटिपवर CSS फेड संक्रमण लागू करा
container स्ट्रिंग | घटक | खोटे false

विशिष्ट घटकास टूलटिप जोडते. उदाहरण: container: 'body'. हा पर्याय विशेषतः उपयुक्त आहे कारण तो तुम्हाला दस्तऐवजाच्या प्रवाहात ट्रिगरिंग घटकाजवळ टूलटिप ठेवण्याची परवानगी देतो - जे विंडो रिसाइज दरम्यान टूलटिपला ट्रिगरिंग घटकापासून दूर जाण्यापासून प्रतिबंधित करेल.
delay संख्या | वस्तू 0

टूलटिप (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला असेल तर, लपवा/शो या दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट संरचना आहे:delay: { "show": 500, "hide": 100 }
html बुलियन false

टूलटिपमध्ये HTML ला अनुमती द्या.

खरे असल्यास, टूलटिपमधील HTML टॅग टूलटिपमध्ये titleप्रस्तुत केले जातील. असत्य असल्यास, innerTextDOM मध्ये सामग्री घालण्यासाठी प्रॉपर्टी वापरली जाईल.

तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
placement स्ट्रिंग | कार्य 'top'

टूलटिप कसे ठेवावे - ऑटो | शीर्ष | तळाशी | डावीकडे | बरोबर
जेव्हा autoनिर्दिष्ट केले जाते, तेव्हा ते डायनॅमिकपणे टूलटिपला पुनर्स्थित करेल.

जेव्हा एखादे फंक्शन स्थान निश्चित करण्यासाठी वापरले जाते, तेव्हा त्याला टूलटिप DOM नोडला त्याचा पहिला युक्तिवाद म्हणून आणि ट्रिगरिंग घटक DOM नोडला दुसरा म्हणून म्हटले जाते. thisसंदर्भ टूलटिप उदाहरणावर सेट केला आहे .
selector स्ट्रिंग | खोटे false निवडक प्रदान केल्यास, टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केल्या जातील. व्यवहारात, डायनॅमिकली जोडलेल्या DOM घटकांवर टूलटिप लागू करण्यासाठी देखील याचा वापर केला जातो ( jQuery.onसमर्थन). हे आणि एक माहितीपूर्ण उदाहरण पहा .
template स्ट्रिंग '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप तयार करताना वापरण्यासाठी बेस HTML.

टूलटिप titleमध्ये इंजेक्ट केली जाईल .tooltip-inner.

.tooltip-arrowटूलटिपचा बाण होईल.

सर्वात बाहेरील रॅपर घटकामध्ये .tooltipवर्ग आणि role="tooltip".
title स्ट्रिंग | घटक | कार्य ''

titleविशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisटूलटिप संलग्न केलेल्या घटकास त्याच्या संदर्भासह कॉल केले जाईल.
trigger स्ट्रिंग 'hover focus'

टूलटिप कशी ट्रिगर केली जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही एकाधिक ट्रिगर्स पास करू शकता; त्यांना एका जागेसह वेगळे करा.

'manual'.show()सूचित करते की टूलटिप , .hide()आणि .toggle()पद्धतींद्वारे प्रोग्रामेटिकरित्या ट्रिगर केली जाईल ; हे मूल्य इतर कोणत्याही ट्रिगरसह एकत्र केले जाऊ शकत नाही.

'hover'कीबोर्डद्वारे ट्रिगर करता येणार नाही अशा टूलटिप्सचा परिणाम स्वतःच होईल आणि कीबोर्ड वापरकर्त्यांसाठी समान माहिती पोहोचवण्याच्या पर्यायी पद्धती असतील तरच वापरल्या जाव्यात.
fallbackPlacements रचना ['top', 'right', 'bottom', 'left'] अॅरेमध्ये प्लेसमेंटची सूची देऊन फॉलबॅक प्लेसमेंट परिभाषित करा (प्राधान्य क्रमाने). अधिक माहितीसाठी पॉपरचे वर्तन डॉक्स पहा
boundary स्ट्रिंग | घटक 'clippingParents' टूलटिपची ओव्हरफ्लो मर्यादा सीमा (केवळ पॉपरच्या प्रतिबंधक ओव्हरफ्लो सुधारकाला लागू होते). डीफॉल्टनुसार ते 'clippingParents'HTMLElement संदर्भ स्वीकारू शकते (केवळ JavaScript द्वारे). अधिक माहितीसाठी Popper's detectOverflow डॉक्स पहा .
customClass स्ट्रिंग | कार्य ''

टूलटिप दाखवल्यावर वर्ग जोडा. लक्षात ठेवा की हे वर्ग टेम्प्लेटमध्ये नमूद केलेल्या कोणत्याही वर्गांव्यतिरिक्त जोडले जातील. एकाधिक वर्ग जोडण्यासाठी, त्यांना रिक्त स्थानांसह विभक्त करा: 'class-1 class-2'.

तुम्ही एक फंक्शन देखील पास करू शकता ज्याने अतिरिक्त वर्ग नावे असलेली एकल स्ट्रिंग परत केली पाहिजे.
sanitize बुलियन true स्वच्छता सक्षम किंवा अक्षम करा. सक्रिय केल्यास 'template'आणि 'title'पर्याय निर्जंतुक केले जातील. आमच्या JavaScript दस्तऐवजीकरणातील सॅनिटायझर विभाग पहा .
allowList वस्तू डीफॉल्ट मूल्य ऑब्जेक्ट ज्यामध्ये अनुमत विशेषता आणि टॅग आहेत
sanitizeFn शून्य | कार्य null येथे तुम्ही तुमचे स्वतःचे सॅनिटाइज फंक्शन देऊ शकता. तुम्ही सॅनिटायझेशन करण्यासाठी समर्पित लायब्ररी वापरण्यास प्राधान्य दिल्यास हे उपयुक्त ठरू शकते.
offset अॅरे | स्ट्रिंग | कार्य [0, 0]

त्याच्या लक्ष्याशी संबंधित टूलटिपचा ऑफसेट. तुम्ही स्वल्पविरामाने विभक्त मूल्यांसह डेटा विशेषतांमध्ये स्ट्रिंग पास करू शकता जसे की:data-bs-offset="10,20"

जेव्हा ऑफसेट निर्धारित करण्यासाठी फंक्शन वापरले जाते, तेव्हा त्याला पॉपर प्लेसमेंट, संदर्भ असलेल्या ऑब्जेक्टसह कॉल केले जाते आणि पॉपर त्याचा पहिला युक्तिवाद म्हणून रेक्ट करतो. ट्रिगरिंग घटक DOM नोड दुसरा युक्तिवाद म्हणून पास केला जातो. फंक्शनने दोन संख्यांसह अॅरे परत करणे आवश्यक आहे: .[skidding, distance]

अधिक माहितीसाठी पॉपर ऑफसेट डॉक्स पहा .
popperConfig शून्य | ऑब्जेक्ट | कार्य null

बूटस्ट्रॅपचे डीफॉल्ट पॉपर कॉन्फिगरेशन बदलण्यासाठी, पॉपरचे कॉन्फिगरेशन पहा .

जेव्हा फंक्शन पॉपर कॉन्फिगरेशन तयार करण्यासाठी वापरले जाते, तेव्हा ते बूटस्ट्रॅपचे डीफॉल्ट पॉपर कॉन्फिगरेशन असलेल्या ऑब्जेक्टसह कॉल केले जाते. हे तुम्हाला तुमच्या स्वतःच्या कॉन्फिगरेशनसह डीफॉल्ट वापरण्यास आणि विलीन करण्यात मदत करते. फंक्शनने पॉपरसाठी कॉन्फिगरेशन ऑब्जेक्ट ���रत करणे आवश्यक आहे.

वैयक्तिक टूलटिपसाठी डेटा विशेषता

वर सांगितल्याप्रमाणे वैयक्तिक टूलटिपसाठी पर्याय डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

सह फंक्शन वापरणेpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

दाखवा

घटकाची टूलटिप प्रकट करते. टूलटिप प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.tooltipइव्हेंट होण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते. शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.

tooltip.show()

लपवा

घटकाची टूलटिप लपवते. टूलटिप प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येते (म्हणजे hidden.bs.tooltipघटना घडण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

tooltip.hide()

टॉगल

घटकाची टूलटिप टॉगल करते. टूलटिप प्रत्यक्षात दाखविण्याआधी किंवा लपविण्याआधी कॉलरकडे परत येते (म्हणजे shown.bs.tooltipकिंवा hidden.bs.tooltipघटना घडण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

tooltip.toggle()

विल्हेवाट लावणे

घटकाची टूलटिप लपवते आणि नष्ट करते (DOM घटकावरील संग्रहित डेटा काढून टाकते). डेलिगेशन वापरणाऱ्या टूलटिप्स (ज्या पर्याय वापरून तयार केल्या जातात ) selectorवंशज ट्रिगर घटकांवर वैयक्तिकरित्या नष्ट केल्या जाऊ शकत नाहीत.

tooltip.dispose()

सक्षम करा

घटकाची टूलटिप दाखवण्याची क्षमता देते. टूलटिप डीफॉल्टनुसार सक्षम आहेत.

tooltip.enable()

अक्षम करा

घटकाची टूलटिप दाखवण्याची क्षमता काढून टाकते. टूलटिप पुन्हा-सक्षम केल्यावरच ती दाखवता येईल.

tooltip.disable()

टॉगल सक्षम

घटकाची टूलटिप दाखवण्याची किंवा लपवण्याची क्षमता टॉगल करते.

tooltip.toggleEnabled()

अद्यतन

घटकाच्या टूलटिपची स्थिती अपडेट करते.

tooltip.update()

getInstance

स्टॅटिक पद्धत जी तुम्हाला DOM घटकाशी संबंधित टूलटिप उदाहरण मिळविण्यास अनुमती देते

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित टूलटिप उदाहरण मिळवू देते किंवा ती सुरू न झाल्यास नवीन तयार करू देते

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
show.bs.tooltip showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
shown.bs.tooltip जेव्हा टूलटिप वापरकर्त्यासाठी दृश्यमान केली जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.tooltip hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.tooltip जेव्हा टूलटिप वापरकर्त्यापासून लपविणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
inserted.bs.tooltip show.bs.tooltipजेव्हा टूलटिप टेम्प्लेट DOM मध्ये जोडले जाते तेव्हा हा इव्हेंट इव्हेंटनंतर काढला जातो . 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()