<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/bootstrap.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
	<!-- InstanceBeginEditable name="doctitle" -->
    <title>How to Create Tooltips with Bootstrap 5 - Tutorial Republic</title>
    <meta name="description" content="Learn how to use Bootstrap tooltip plugin to create elegant tooltips to provide hint or information about the element like icon and links to the user on hover." />
    <!-- InstanceEndEditable -->
    	<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="fb:admins" content="100001054961582" />
<meta property="fb:app_id" content="1404574483159557" />
<meta property="og:image" content="/lib/images/signature.png" />
<link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
<style>
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html,body{min-height:100%}
p{margin:0 0 12px}
ol,ul{margin:0 0 12px}
a,a:active,a:visited{outline:none;color:#1db79f;text-decoration:none}
a img{border:none;outline:none}
p code,table td:last-child code,.content ul li code,code.mark{padding:2px 4px;color:#333;background-color:#f1f1f1;border-radius:4px}
a code{color:inherit;background:none;padding:0}
table{border-collapse:collapse;border-spacing:0}
table td{vertical-align:top}
body{min-width:1300px;color:#414141;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;font-size:17px;line-height:1.7}
input,select,textarea,button,div,span,a{box-sizing:border-box}
h1,h2,h3,h4{color:#262626;margin:20px 0 10px;line-height:1.5;font-weight:600}
h1{font-size:34px;margin-top:17px}
h2{font-size:28px}
h3{font-size:22px}
.space{margin-bottom:25px!important}
.break{margin-bottom:15px!important}
.text-center{text-align:center!important}
.scroll{height:195px;overflow-y:scroll}
.scroll.large{height:245px}
.scroll.xlarge{height:290px}
.scroll.xxlarge{height:340px}
sup{font-size:13px}
h1 sup{background:#ec0000;border-radius:3px;padding:5px 10px;font-size:15px;color:#fff;position:relative;top:5px}
.leaderboard{padding-top:14px;position:relative;height:105px;overflow:hidden}
.intro-image img{display:block;padding:10px 0 25px;max-width:100%}
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
code,.code,.syntax,.green-box,.sky-box,.gray-box,.pink-box,.red-box,.at-rule,.codebox pre,.console-output,.command{font-size:16px;font-family:Consolas,Monaco,Courier,monospace}
.console-output{margin:15px 0}
.command{background:#f2f2f2;padding:16px 18px;margin:15px 0 25px;border-radius:3px}
hr{border:none;border-bottom:1px solid #e7e9ed;height:1px;margin:30px 0}
.summary,.topic{border:1px solid #eaeaea;border-width:1px 0;margin:20px 0;padding:10px 0;color:#8e9aa6;line-height:1.5}
h2.section-title span{display:inline-block;border-bottom:4px solid #c9d7e0;padding:0 50px 12px 0}
.wrapper{width:1300px;padding:0 15px;margin:0 auto}
.header{background:#23384e;padding:16px 0}
input.search{background:#fff;border:0 none;color:#807E7E;float:left;height:38px;line-height:26px;font-size:14px;margin:0 0 0 12px;outline:medium none;padding:6px 14px;width:500px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,0.6);font-family:inherit}
.search-btn{color:rgba(0,0,0,.6);background:#ebebeb;border:none;outline:none;cursor:pointer;float:left;height:38px;line-height:46px;width:44px;display:block;margin-left:-2px;border-radius:0 2px 2px 0;box-shadow:0 0 1px rgba(0,0,0,0.7)}
.logo{width:304px}
.logo img{height:44px;margin:-3px 0;display:block}
.site-search{float:left;margin-left:100px}
.menu{background-color:#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.15);position:relative;z-index:9}
.menu a{color:#666;display:inline-block;padding:0 10px;text-decoration:none;font-size:14px;font-weight:600;height:48px;line-height:48px}
.menu a:first-child{margin-left:-10px}
.menu a.tool-link{float:right;display:block;border-radius:30px;line-height:28px;position:relative;height:auto;top:9px;padding:0 12px;color:#1ebba3;border:1px double #1ebba3}
.fl,.logo{float:left}
.leftcolumn{width:240px;float:left;font-size:16px;color:#4f4f4f}
.centercolumn{width:850px;float:left}
.rightcolumn{width:180px;float:left}
.content{background:#fff;padding:15px 40px 20px;border:1px solid #dedede;border-top:none;border-radius:1px}
.sidebar{width:160px;float:left;padding-top:28px;margin-left:20px;position:relative}
.leftcolumn .segment{margin:16px 0 12px;position:relative;font-size:18px;font-weight:600;line-height:normal}
.leftcolumn a{color:#4f4f4f;font-size:16px;line-height:26px;display:block;border-bottom:1px solid transparent}
.leftcolumn ul{list-style:none;padding:0;margin:0}
.segment,.chapters,.chapters a{float:left;clear:both}
h1 code,h2 code,h3 code{font:inherit}
.color-box{margin:15px 0;padding-left:20px}
.note-box,.warning-box,.tip-box{padding:8px 8px 3px 26px}
.info-tab{float:left;margin-left:-23px}
.content ul li{margin-top:7px}
.extra{padding-top:5px}
.green-box,.sky-box,.gray-box,.red-box,.pink-box{color:#000;margin-top:15px;padding:10px;background-color:#f6f8fa;border:1px solid #d7e2ec}
.example{background:#f4f5f6;padding:3px;margin:15px 0}
.codebox{background:#fff;border:1px solid #ddd}
.codebox-title{height:41px;padding-left:12px;border-bottom:1px solid #ddd;background:#f5f5f5}
.codebox-title h4{margin:0;font-size:18px;line-height:40px;float:left;font-weight:600}
a.try-btn,a.download-btn{width:140px;height:40px;color:#333;font-size:15px;line-height:41px;font-weight:600;text-align:center;text-decoration:none;float:right;display:block;border-left:1px solid #ddd;background:rgba(27,31,35,0.08);box-sizing:border-box;font-family:Arial,sans-serif}
a.try-btn span{font-size:18px;line-height:normal}
.hide,.code-style,.box-size,.bottom-link,.footer,.code-style,.snippets,.report-error,.badge,.social,.ad-label,.mobile-only,ul.tree-menu li ul{display:none}
.skyscraper{width:160px;height:600px;overflow:hidden;margin-bottom:20px;background:#ebecf0}
.bottom-ad{margin-top:46px;padding:24px;position:relative;background:url(../lib/images/smooth-line.png) no-repeat center #f9f9f9}
.rectangle-left,.rectangle-right{min-width:336px;min-height:280px;overflow:hidden}
.fr,a.previous-page,a.next-page,.rectangle-right,.topic-nav{float:right}
a.previous-page,a.next-page{width:32px;height:32px;line-height:30px}
.shadow{background:#F7F8F9;padding:3px;margin:10px 0}
.syntax{color:#2f4959;padding:13px 18px;background:#F9F9FA;border:1px solid #ddd;font-size:15px}
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}
pre[class*="language-"]{position:relative;margin:.5em 0;overflow:visible;padding:0}
pre[class*="language-"]>code{position:relative;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}
code[class*="language"]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}
:not(pre) > code[class*="language-"]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,0.1);display:inline;white-space:normal}
pre[class*="language-"].line-numbers{padding-left:0}
pre[class*="language-"].line-numbers code{padding-left:3.8em}
pre[class*="language-"].line-numbers .line-numbers-rows{left:0}
pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0}
pre[data-line] code{position:relative;padding-left:4em}
pre .line-highlight{margin-top:0}
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;white-space:pre-wrap!important}
pre.line-numbers > code{position:relative;white-space:inherit}
.line-numbers-rows,.codebox pre.inactive{display:none}
.codebox pre.syntax-highlighter{margin:0;padding:0;overflow:auto}
pre.line-numbers .line-numbers-rows{border-right:3px solid #6CE26C}
.codebox pre.syntax-highlighter > code{box-shadow:none!important;padding-left:3.8em;background-image:linear-gradient(transparent 50%,#F8F8F8 50%);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;font-size:16px;line-height:1.5;overflow-wrap:break-word}
.codebox pre.syntax-highlighter,.codebox pre.syntax-highlighter code{border:none;width:100%;box-sizing:border-box}
pre.line-numbers code,pre.line-numbers .line-numbers-rows{padding-top:2px;padding-bottom:2px}
.preview-box{padding:15px;text-align:center;cursor:pointer;overflow:hidden;background:#FFF;border:1px solid #e6e6e6}
.preview-box a,.preview-box img{display:block;margin:0 auto}
.download-box{text-align:center;padding:20px 0;margin:20px 0 10px}
.output-box{border-color:#d4d4d4;border-style:solid;border-width:1px 0;padding:5px 15px;overflow:hidden;background:#fff;margin:10px 0}
.demo-box{margin-top:15px}
.subhead{border-bottom:3px solid #DCE3EB;margin-bottom:15px;padding-bottom:10px}
table.data,table.description{width:100%;font-size:92%}
table.data th{color:#000;padding:8px 7px;text-align:left;font-size:15px;background:#F8F8F8}
table.data td{color:#484848;padding:5px 7px;background:#fff}
table.data th,table.data td{vertical-align:top;border:1px solid #DCE3EB}
table.data tr.section th,table.data td.section{font-size:15px;background:#f0f4f7}
table.description th{width:150px}
table.no-wrap tr td:first-child{white-space:nowrap}
.topic-nav{padding-right:5px;color:#d0d0d0}
.topic-nav a{padding:0 15px;margin:0 0 0 5px;position:relative;display:inline-block}
.topic-nav a::after{font-size:24px;position:absolute;line-height:22px}
.topic-nav a:first-child{margin:0 5px 0 0}
.topic-nav a:first-child::after{content:'\00AB';left:-5px}
.topic-nav a:last-child::after{content:'\00BB';right:-5px}
@media screen and (max-width: 1280px) {
body{min-width:1260px}
.wrapper{width:1260px}
.leftcolumn{width:230px}
.centercolumn{width:820px}
.preview-box img{max-width:100%;height:auto}
}
@media screen and (max-width: 800px) {
body{min-width:100%;max-width:100%;padding-top:46px}
.wrapper{width:100%;padding:0}
.header{height:46px;padding:5px 0;position:fixed;top:0;left:0;right:0;width:100%;z-index:99}
.logo{width:auto;display:block;padding:6px 0 0 60px;position:absolute;left:0;z-index:100}
.logo img{height:30px}
.menu{width:100%;padding-left:12px;padding-right:12px;overflow-x:auto;white-space:nowrap}
.centercolumn{width:100%;float:none}
.content{padding:10px;border-width:0 0 1px 0}
.content img{max-width:100%;height:auto}
.skyscraper{display:inline-block}
.shadow,.example,.console-output,.content pre{max-width:100%;overflow-x:auto}
.codebox-title{position:relative}
.codebox.multi-style-mode pre{padding-top:7px;margin-top:36px;border-top:1px solid #ddd}
.bottom-ad{height:auto;background:none;padding:30px 0 0;margin:40px 0 0;text-align:center;position:relative}
.rectangle-left,.rectangle-right{float:none;display:inline-block;margin:10px auto;background:#EDEEF2}
.leftcolumn,.footer,.social,.site-search,.code-style,.menu a.tool-link,.backdrop{display:none}
.summary,.topic{padding:5px 0;margin:10px 0}
.leftcolumn,.centercolumn,.rightcolumn,.sidebar{float:none}
.header,.menu,.centercolumn,.footer,.appeal-text{width:100%}
a.try-btn,a.download-btn{width:130px}
.native-unit{margin-bottom:30px}
.rightcolumn,.sidebar{margin: 25px auto 0}
.overview{padding-right:0}
.scroll-pane{overflow-x:auto}
table.data{min-width:480px}
table.data pre{display:inline;white-space:normal}
table tr th,table tr td{width:auto!important}
.preview-box{padding:6px}
.leaderboard{margin:20px 0}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px}
.codebox pre.syntax-highlighter{overflow-x:auto}
.codebox pre.syntax-highlighter > code{min-width:614px;height:auto;overflow-x:hidden}
}
@media screen and (min-width: 801px) {
.site-search,.leftcolumn,.social{display:block!important}
.backdrop{display:none!important}
.hide-scroll{overflow-x:hidden!important}
}
.menu a.old-version{height:21px;font-size:13px;line-height:17px;border:1px double;border-radius:40px;margin-right:10px}</style>
<script>
    (function(){
        var bsa_optimize=document.createElement('script');
        bsa_optimize.type='text/javascript';
        bsa_optimize.async=true;
        bsa_optimize.src='https://cdn4.buysellads.net/pub/tutorialrepublic.js';
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa_optimize);
    })();
</script>
    
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40117907-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-40117907-1');
</script></head>
<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;">&nbsp;</div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
    <!--Header-->
    
<div class="header">
    <div class="wrapper clearfix">
        <button type="button" class="open-menu mobile-only"><i class="icon-menu"></i></button>
        <div class="logo">
            <a href="../index.html"><img src="../lib/images/logo.svg" alt="TutorialRepublic" /></a>
        </div>
        <div class="site-search">
            <form inert action="https://www.google.com/search" method="get" target="_blank" class="clearfix">
                <input type="hidden" value="www.tutorialrepublic.com" name="sitesearch"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <input type="text" name="q" placeholder="disabled" id="searchInput" class="search"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <button type="submit" class="search-btn"><span class="icon-search"></span></button>
            </form>
        </div>
        <div class="social">                
            <a href="https://www.facebook.com/tutorialrepublic" target="_blank" title="Join us on Facebook"><i class="icon-facebook"></i></a>
            <a href="https://twitter.com/tutrepublic" target="_blank" title="Follow us on Twitter"><i class="icon-twitter"></i></a>
            <a href="../contact-us.php.html" target="_blank" title="Send us an Email"><i class="icon-mail"></i></a>
        </div>
        <button type="button" class="open-search mobile-only">
            <i class="icon-search"></i>
        </button>
    </div>    
</div>
<div class="menu">
    <div class="wrapper">
        <a href="../index.html" title="Home Page">HOME</a>
        <a href="../html-tutorial/html-introduction.php.html" title="HTML Tutorial">HTML5</a>            
        <a href="../css-tutorial/index.html" title="CSS Tutorial">CSS3</a>
        <a href="../javascript-tutorial/index.html" title="JavaScript Tutorial">JAVASCRIPT</a>
        <a href="../jquery-tutorial/index.html" title="jQuery Tutorial">JQUERY</a>
        <a href="index.html" title="Bootstrap 5 Tutorial">BOOTSTRAP5</a>
		<a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/" class="old-version" title="Bootstrap 4.6 Tutorial">v4.6</a>
        <a href="../php-tutorial/index.html" title="PHP Tutorial">PHP7</a> 
        <a href="../sql-tutorial/index.html" title="SQL Tutorial">SQL</a>
        <a href="../references.php.html" title="Web References">REFERENCES</a>
        <a href="../practice-examples.php.html" title="Practice Examples and Demos">EXAMPLES</a>
        <a href="../faq.php.html" title="Frequently Asked Questions and Answers">FAQ</a>
        <a href="../snippets/gallery.php.html" title="Bootstrap Code Snippets" target="_blank">SNIPPETS</a>
        <a href="../codelab.php.html" class="tool-link" target="_blank">Online HTML Editor</a>
    </div>        
</div>    <!--End:Header-->
    <div class="wrapper clearfix">
        <div class="leftcolumn" id="myNav">
		
        <div class="segment"><span>BOOTSTRAP</span> BASIC</div>
<div class="chapters">
    <a href="index.html">Bootstrap Introduction</a>
    <a href="bootstrap-get-started.php.html">Bootstrap Getting Started</a>
	<a href="bootstrap-containers.php.html">Bootstrap Containers</a>
    <a href="bootstrap-grid-system.php.html">Bootstrap Grid System</a>
    <a href="bootstrap-fixed-layout.php.html">Bootstrap Fixed Layout</a>
    <a href="bootstrap-fluid-layout.php.html">Bootstrap Fluid Layout</a>
    <a href="bootstrap-responsive-layout.php.html">Bootstrap Responsive Layout</a>
    <a href="bootstrap-typography.php.html">Bootstrap Typography</a>
    <a href="bootstrap-tables.php.html">Bootstrap Tables</a>
    <a href="bootstrap-lists.php.html">Bootstrap Lists</a>
	<a href="bootstrap-list-groups.php.html">Bootstrap List Groups</a>
    <a href="bootstrap-forms.php.html">Bootstrap Forms</a>
	<a href="bootstrap-custom-forms.php.html">Bootstrap Custom Forms</a>
	<a href="bootstrap-input-groups.php.html">Bootstrap Input Groups</a>
	<a href="bootstrap-buttons.php.html">Bootstrap Buttons</a>
	<a href="bootstrap-button-groups.php.html">Bootstrap Button Groups</a>
    <a href="bootstrap-images.php.html">Bootstrap Images</a>
	<a href="bootstrap-cards.php.html">Bootstrap Cards</a>
	<a href="bootstrap-media-objects.php.html">Bootstrap Media Objects</a>
    <a href="bootstrap-icons.php.html">Bootstrap Icons</a>
    <a href="bootstrap-navs.php.html">Bootstrap Navs</a>
    <a href="bootstrap-navbar.php.html">Bootstrap Navbar</a>
    <a href="bootstrap-accordion.php.html">Bootstrap Accordion</a>
    <a href="bootstrap-breadcrumbs.php.html">Bootstrap Breadcrumbs</a>
    <a href="bootstrap-pagination.php.html">Bootstrap Pagination</a>
    <a href="bootstrap-labels-and-badges.php.html">Bootstrap Badges</a>
    <a href="bootstrap-progress-bars.php.html">Bootstrap Progress Bars</a>
	<a href="bootstrap-spinners.php.html">Bootstrap Spinners</a>
	<a href="bootstrap-jumbotron.php.html">Bootstrap Jumbotron</a>
	<a href="bootstrap-helper-classes.php.html">Bootstrap Helper Classes</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> ADVANCED</div>
<div class="chapters">
	<a href="bootstrap-modals.php.html">Bootstrap Modals</a>
    <a href="bootstrap-dropdowns.php.html">Bootstrap Dropdowns</a>
	<a href="bootstrap-tabs.php.html">Bootstrap Tabs</a>
    <a href="bootstrap-collapse.php.html">Bootstrap Collapse</a>
    <a href="bootstrap-tooltips.php.html">Bootstrap Tooltips</a>
    <a href="bootstrap-popovers.php.html">Bootstrap Popovers</a>
    <a href="bootstrap-alerts.php.html">Bootstrap Alerts</a>
	<a href="bootstrap-stateful-buttons.php.html">Bootstrap Stateful Buttons</a>    
    <a href="bootstrap-carousel.php.html">Bootstrap Carousel</a>
    <a href="bootstrap-typeahead.php.html">Bootstrap Typeahead</a>
    <a href="bootstrap-scrollspy.php.html">Bootstrap ScrollSpy</a>
	<a href="bootstrap-toasts.php.html">Bootstrap Toasts</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> EXAMPLES</div>
<div class="chapters">
    <a href="../twitter-bootstrap-examples.php.html">Bootstrap Practice Examples</a>
	<a href="../faq.php.html#bootstrap-sass">Bootstrap FAQ's Answers</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> ARCHIVE</div>
<div class="chapters">
    <a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/">Bootstrap 4 Tutorial</a>
	<a href="../twitter-bootstrap-4-examples.php.html">Bootstrap 4 Practice Examples</a>
</div>        
                </div>
        <div class="centercolumn">
            <!--Text Content-->
            <div class="content">
                <div class="leaderboard">

    <div class="ad-label">Advertisements</div>

    <div class="ad-container">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Responsive Leaderboard -->
        <ins class="adsbygoogle"
                style="display:block;max-width:728px;width:100%;height:90px"
                data-ad-client="ca-pub-9107540490929984"
                data-ad-slot="4302666817"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <!-- ABR Leaderboard -->
    <div id="bsa-zone_1579648332258-0_123456"></div>

</div>                <!-- InstanceBeginEditable name="main_content" -->
                <a href="bootstrap-collapse.php.html" class="previous-page" title="Go to Previous Page"></a>
            	<a href="bootstrap-popovers.php.html" class="next-page" title="Go to Next Page"></a>
                <h1>Bootstrap <span>Tooltips</span></h1>
                <p class="summary">In this tutorial you will learn how to create tooltips with Bootstrap.</p>
                <h2>Creating the Tooltips with Bootstrap</h2>
                <p>A tooltip is a small pop&thinsp;up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.</p>
                <p>Tooltips can be very helpful for the new visitors of your website because they enable the user to know the purpose of icons and links by placing the mouse pointer over them.</p>
                <h3>Step 1: Adding the Tooltip Markup</h3>
				<p>To create a tooltip, you need to add the <code>data-bs-toggle="tooltip"</code> attribute to an element. Tolltip text that would display on hover can be specified using the <code>title</code> attribute.</p>
				<p>Here is the standard markup for adding a tolltip to a hyperlink.</p>
				<div class="shadow">
                    <div class="syntax">
                        <span class="tag">&lt;a <span class="attribute">href</span>="<span class="attribute-value">#</span>" <span class="attribute">data-bs-toggle</span>="<span class="attribute-value">tooltip</span>" <span class="attribute">title</span>="<span class="attribute-value">Some text</span>"&gt;</span>Hover over me<span class="tag">&lt;/a&gt;</span>
                    </div>
                </div>
                <!--End:Code box-->
				<p class="space">Similarly, you can add tooltips to the other elements such as buttons, icons, etc.</p>				
				<h3>Step 2: Enabling the Tooltips</h3>
                <p>Tooltips can be enabled via JavaScript &mdash; just call the <code>tooltip()</code> Bootstrap method with the <code>id</code>, <code>class</code> or any <a href="../css-tutorial/css-selectors.php.html">CSS selector</a> of the target element in your JavaScript code.</p>
                <p>You can either initialize tooltips individually or all in one go. The following jQuery code will initialize all tooltips on the page by selecting them by their <code>data-bs-toggle</code> attribute.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="enable-tooltips-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="enable-tooltips-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=enable-tooltips-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $('[data-bs-toggle="tooltip"]').tooltip();   
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(element){
        return new bootstrap.Tooltip(element);
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=enable-tooltips-via-jquery.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-tooltip.png" width="760" height="100" alt="Bootstrap Tooltip" />
                        </a>
                    </div>
                </div>
                <!--Note box-->
                <div class="color-box break">
                    <div class="shadow">
                        <div class="info-tab note-icon" title="Important Notes"><i></i></div>
                        <div class="note-box">
                            <p><strong>Note:</strong> For performance reasons the tooltip data-apis are opt in, means to use tooltips you must initialize them yourself. Also, tooltips with zero-length titles are never displayed, as well as triggering tooltips on hidden elements will not work.</p>
                        </div>
                    </div>
                </div>
                <!--End:Note box-->
                <!--Tip Box-->
                <div class="color-box">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> Tooltips for <code>.disabled</code> or <code>disabled</code> elements must be triggered on a wrapper element. Also, when tooltips are triggered from hyperlinks that span multiple lines, it will be centered. You can use <code>white-space: nowrap;</code> on those hyperlinks to avoid this behavior.</p>
                        </div>
                    </div>
                </div>
                <!--End:Tip Box-->
                <hr />
                <h2>Setting the Directions of Tooltips</h2>
                <p>You can set tooltips to appear on top, right, bottom and left sides of an element.</p>
				<h3>Positioning of Tooltips via Data Attributes</h3>
				<p>The following example will show you how to set the direction of tooltips via data attributes.</p>
				<!--Code box-->
                <div class="example space">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=tooltips-placement-via-data-attributes.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"&gt;Tooltip on top&lt;/a&gt;
&lt;a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"&gt;Tooltip on right&lt;/a&gt;
&lt;a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"&gt;Tooltip on bottom&lt;/a&gt;
&lt;a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"&gt;Tooltip on left&lt;/a&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
				<h3>Positioning of Tooltips via JavaScript</h3>
				<p>The following example will show you how to set the direction of tooltips via JavaScript.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="tooltips-placement-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="tooltips-placement-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=tooltips-placement-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#tipTop").tooltip({ placement : "top" });
    $("#tipRight").tooltip({ placement : "right" });
    $("#tipBottom").tooltip({ placement : "bottom" });
    $("#tipLeft").tooltip({ placement : "left" });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    // Placement of tooltip on top
    var tipTop = document.getElementById("tipTop");
    var tooltipTop = new bootstrap.Tooltip(tipTop, { 
        placement : "top" 
    });

    // Placement of tooltip on right
    var tipRight = document.getElementById("tipRight");
    var tooltipRight = new bootstrap.Tooltip(tipRight, { 
        placement : "right" 
    });
    
    // Placement of tooltip on bottom
    var tipBottom = document.getElementById("tipBottom");
    var tooltipBottom = new bootstrap.Tooltip(tipBottom, { 
        placement : "bottom" 
    });

    // Placement of tooltip on left
    var tipLeft = document.getElementById("tipLeft");
    var tooltipLeft = new bootstrap.Tooltip(tipLeft, { 
        placement : "left" 
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->                
				<hr />
                <h2>Options</h2>
                <p>There are certain options which may be passed to <code>tooltip()</code> Bootstrap method to customize the functionality of the tooltip plugin.</p>
                <div class="shadow">
                	<table class="data">
                    	<thead>
                        	<tr>
                            	<th>Name</th>
                                <th style="width: 90px;">Type</th>
                                <th style="width: 130px;">Default&nbsp;Value</th>
                                <th>Description</th>
                            </tr>                        	
                        </thead>
                        <tbody>
                        	<tr>
                            	<td>animation</td>
                                <td>boolean</td>
                                <td>true</td>
                                <td>Apply a CSS fade transition to the tooltip.</td>
                            </tr>
                            <tr>
                            	<td>container</td>
                                <td>string | element | false</td>
                                <td>false</td>
                                <td>
                                    <p>Appends the tooltip to a specific element.</p>
                                    <p>Specify <code>container: 'body'</code> to avoid rendering problems in more complex components (like input groups, button groups, etc.)</p>
                                </td>
                            </tr>
                            <tr>
                            	<td>delay</td>
                                <td>number | object</td>
                                <td>0</td>
                                <td>
                                	<p>Time to delay in showing and hiding the tooltip (ms) &mdash; does not apply to manual trigger type.</p>
                                    <p>If a number is supplied, delay is applied to both hide/show</p>
                                    <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
                                </td>
                            </tr>
                            <tr>
                            	<td>html</td>
                                <td>boolean</td>
                                <td>false</td>
                                <td>
                                    <p>Insert HTML into the tooltip.</p>
                                    <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, <code>innerText</code> property will be used to insert content into the DOM.</p>
                                    <p>Use simple text if you're worried about XSS attacks.</p>
                                </td>
                            </tr>
                            <tr>
                            	<td>placement</td>
                                <td>string | function</td>
                                <td>'top'</td>
                                <td>
                                    <p>Sets the position of the tooltip &mdash; auto | top | bottom | left | right.</p>
                                    <p>When <code>auto</code> value is specified, it will dynamically reorient the tooltip.</p>
                                </td>
                            </tr>
                            <tr>
                            	<td>selector</td>
                                <td>string | false</td>
                                <td>false</td>
                                <td>
                                    <p>If a selector is provided, tooltip objects will be attached to the specified targets.</p>
                                    <p>This is normally used to apply tooltips to dynamically added DOM elements.</p>
                                </td>
                            </tr>
                            <tr>
								<td>template</td>
								<td>string</td>
								<td><code style="font-size:92%;">'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
								<td>
									<p>Base HTML to use when creating the tooltip.</p>
                                    <p>The tooltip's <code>title</code> will be inserted into the <code>.tooltip-inner</code> element.</p>
                                    <p>The <code>.tooltip-arrow</code> element will become the tooltip's arrow.</p>
									<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
								</td>
							</tr>
                            <tr>
                            	<td>title</td>
                                <td>string | element | function</td>
                                <td>''</td>
                                <td>Sets the default title value if <code>title</code> attribute isn't present.</td>
                            </tr>
                            <tr>
                            	<td>trigger</td>
                                <td>string</td>
                                <td>'hover focus'</td>
                                <td>
                                    <p>Specify how tooltip is triggered &mdash; click | hover | focus | manual. You can pass multiple triggers; separated with a space.</p>
                                    <p>The value <code>manual</code> indicates that the tooltip will be triggered programmatically via the <code>.show()</code>, <code>.hide()</code> and <code>.toggle()</code> methods; this value cannot be combined with any other trigger.</p>
                                </td>
                            </tr>
                            <tr>
                            	<td>fallbackPlacements</td>
                                <td>array</td>
                                <td>['top', 'right', 'bottom', 'left']</td>
                                <td>Allows you to specify which placement Popper will use on fallback.</td>
                            </tr>                            
                            <tr>
                            	<td>boundary</td>
                                <td>string | element</td>
                                <td>'clippingParents'</td>
                                <td>Overflow constraint boundary of the tooltip (applies only to Popper's <code>preventOverflow</code> modifier). It can also accept an HTMLElement reference (via JavaScript only). </td>
                            </tr>
                            <tr>
                            	<td>customClass</td>
                                <td>string | function</td>
                                <td>''</td>
                                <td>
                                    <p>Add classes to the tooltip when it is shown. Please note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces like: <code>'class1 class2'</code>.</p>
                                    <p>You can also pass a function that should return a single string containing additional class names.</p>
                                </td>
                            </tr>
                            <tr>
                            	<td>sanitize</td>
                                <td>boolean</td>
                                <td>true</td>
                                <td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized.</td>
                            </tr>
                            <tr>
                            	<td>allowList</td>
                                <td>object</td>
                                <td><a rel="nofollow" href="https://getbootstrap.com/docs/4.6/getting-started/javascript/#sanitizer" target="_blank"><i>Default value</i></a></td>
                                <td>Object which contains allowed attributes and tags.</td>
                            </tr>
                            <tr>
                            	<td>sanitizeFn</td>
                                <td>null | function</td>
                                <td>null</td>
                                <td>Allows you to specify your own sanitize function.</td>
                            </tr>
                            <tr>
                            	<td>offset</td>
                                <td>array | string | function</td>
                                <td>[0, 0]</td>
                                <td>Offset of the tooltip relative to its target. You can also pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></td>
                            </tr>
                            <tr>
                            	<td>popperConfig</td>
                                <td>null | object | function</td>
                                <td>null</td>
                                <td>Allows you to change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults" rel="nofollow" target="_blank">Popper's configuration</a>.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p>You can set these options either through the use of data attributes or JavaScript. For setting the tooltips options via data attributes, just append the option name to <code>data-bs-</code> along with the correct value, like <code>data-bs-animation="false"</code>, <code>data-bs-placement="bottom"</code> etc.</p>
				<p>Also, when passing the options via data attributes make sure to change the case type of the option name from <strong>camelCase</strong> to <strong>kebab-case</strong>. For example, instead of using <code>data-bs-customClass="my-class"</code>, use <code>data-bs-custom-class="my-class"</code>.</p>
                <p>However, JavaScript is the preferred way of setting these options as it prevents you from repetitive work. See the <a href="bootstrap-tooltips.php.html#passing-options">passing options</a> section below to know how to set the options for tooltips via JavaScript.</p>
                <hr />
                <h2>Methods</h2>
                <p class="space">These are the standard Bootstrap's tooltip methods:</p>
                <h2 id="passing-options">Passing options</h2>
                <p>You can additionally pass options to the tooltips using options object.</p>
				<p>The following example will set the title text for the tooltips dynamically, if the value of the <code>title</code> attribute is omitted or missing from the selected elements:</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="set-title-text-for-tooltips-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="set-title-text-for-tooltips-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=set-title-text-for-tooltips-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myTooltip").tooltip({
        title : "It looks like title attribute is not present."
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        title : "It looks like title attribute is not present."
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<p>The following example will show you how to place the HTML content inside a tooltip:</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="place-html-inside-a-tooltip-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="place-html-inside-a-tooltip-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=place-html-inside-a-tooltip-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myTooltip").tooltip({
        title: "&lt;h4&gt;&lt;img src='images/smiley.png' width='30' alt='Smiley'&gt; Hello, &lt;b&gt;I'm&lt;/b&gt; &lt;i&gt;Smiley!&lt;/i&gt;&lt;/h4&gt;",  
        html: true
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        title: "&lt;h4&gt;&lt;img src='images/smiley.png' width='30' alt='Smiley'&gt; Hello, &lt;b&gt;I'm&lt;/b&gt; &lt;i&gt;Smiley!&lt;/i&gt;&lt;/h4&gt;",  
        html: true
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<p>The following example will show you how to control the timing of showing and hiding the tooltip using the tooltip's <code>delay</code> option dynamically via JavaScript.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="set-tooltips-show-hide-time-delay-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="set-tooltips-show-hide-time-delay-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=set-tooltips-show-hide-time-delay-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    // Show and hide tooltip with same speed
    $("#tinyTooltip").tooltip({
        delay: 100
    });
    
    // Show and hide tooltip with different speed
    $("#largeTooltip").tooltip({
        delay: {show: 0, hide: 2000}
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var tinyTrigger = document.getElementById("tinyTooltip");
    var largeTrigger = document.getElementById("largeTooltip");
        
    // Showing and hiding tooltip with same speed
    var tinyTooltip = new bootstrap.Tooltip(tinyTrigger, {
        delay: 100
    });
    
    // Showing and hiding tooltip with different speed
    var largeTooltip = new bootstrap.Tooltip(largeTrigger, {
        delay: {show: 0, hide: 2000}
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<p>The following example will show you how to create your own custom template for Bootstrap tooltips instead of using the default one dynamically via JavaScript.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="create-custom-template-for-tooltips-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="create-custom-template-for-tooltips-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=create-custom-template-for-tooltips-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myTooltip").tooltip({
        template: '&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-head"&gt;&lt;h3&gt;&lt;i class="bi-info-circle"&gt;&lt;/i&gt; Important Info&lt;/h3&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;'
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        template: '&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-head"&gt;&lt;h3&gt;&lt;i class="bi-info-circle"&gt;&lt;/i&gt; Important Info&lt;/h3&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;'
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<p>The following example will insert the dynamically generated HTML code of the tooltip at the end of the <code>#wrapper</code> element instead of the default <a href="../html-reference/html-body-tag.php.html"><code>&lt;body&gt;</code></a> element.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="set-tooltips-container-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="set-tooltips-container-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=set-tooltips-container-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    // Append tooltip HTML to wrapper element
    $("#myTooltip").tooltip({
        container: "#wrapper"
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        container: "#wrapper"
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<!--Note box-->
                <div class="color-box">
                    <div class="shadow">
                        <div class="info-tab note-icon" title="Important Notes"><i></i></div>
                        <div class="note-box">
                            <p><strong>Note:</strong> Overriding the tooltip's default <code>container</code> option value does not produce any visible difference on page. To see the actual result you need to inspect the DOM. Press Ctrl+Shift+I (Windows / Linux) or Cmd+Opt+I (Mac) to open Developer tools or DOM Inspector.</p>
                        </div>
                    </div>
                </div>
                <!--End:Note box-->
				<p class="space">Similarly, you can set other options for the tooltips. Let's check out the other methods of the Bootstrap tooltip plugin.</p>
                <h2>show</h2>
                <p>This method reveals an element's tooltip. This is considered a "manual" triggering of the tooltip.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("show");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.show();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>hide</h2>
                <p>This method hides an element's tooltip. This is considered a "manual" triggering of the tooltip.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("hide");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.hide();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>toggle</h2>
                <p>This method toggles an element's tooltip. This is considered a "manual" triggering of the tooltip.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("toggle");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.toggle();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<h2>dispose</h2>
                <p>This method hides and destroys an element's tooltip (i.e. removes stored data on the DOM element).</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("dispose");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.dispose();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>enable</h2>
                <p>This method gives an element's tooltip the ability to be shown. Tooltips are enabled by default.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("enable");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.enable();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>disable</h2>
                <p>This method removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("disable");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.disable();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>toggleEnabled</h2>
                <p>This method toggles the ability for an element's tooltip to be shown or hidden.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.toggleEnabled();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>update</h2>
                <p>This method updates the position of an element's tooltip.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-tooltip-methods-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-tooltip-methods-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myTooltip").tooltip("update");
    }); 
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.update();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>getInstance</h2>
                <p>This is a static method which allows you to get the tooltip instance associated with a DOM element.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="get-tooltip-instance-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="get-tooltip-instance-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=get-tooltip-instance-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    // Trigger the tooltip
    $("#myTooltip").tooltip();
    
    // Get tooltip instance on button click
    $("#myBtn").click(function(){      	
        var myTooltip = bootstrap.Tooltip.getInstance($("#myTooltip")[0]);
        console.log(myTooltip);
        // {_element: a#myTooltip, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {&hellip;}, &hellip;}
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Trigger the tooltip
    var myTooltip = new bootstrap.Tooltip(element);

    // Get tooltip instance on button click
    btn.addEventListener("click", function(){        
        var tooltip = bootstrap.Tooltip.getInstance(element);
        console.log(tooltip);
        // {_element: a#myTooltip, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {&hellip;}, &hellip;}
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->                
                <h2>getOrCreateInstance</h2>
                <p>This is a static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case if the tooltip wasn't initialized.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="get-or-create-tooltip-instance-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="get-or-create-tooltip-instance-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-tooltip-instance-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    // Get or create tooltip instance on button click
    $("#myBtn").click(function(){
        var myTooltip = bootstrap.Tooltip.getOrCreateInstance($("#myTooltip")[0]);
        console.log(myTooltip);
        // {_element: a#myTooltip, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {&hellip;}, &hellip;}
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");
    
    // Get or create tooltip instance on button click
    btn.addEventListener("click", function(){        
        var tooltip = bootstrap.Tooltip.getOrCreateInstance(element);
        console.log(tooltip);
        // {_element: a#myTooltip, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {&hellip;}, &hellip;}
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<hr />
				<h2>Events</h2>
				<p>Bootstrap's tooltip class includes few events for hooking into tooltip functionality.</p>
				<div class="shadow">
                	<table class="data">
                    	<thead>
                        	<tr>
                            	<th>Event</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                        	<tr>
                            	<td>show.bs.tooltip</td>
                                <td>This event fires immediately when the show instance method is called.</td>
                            </tr>
                            <tr>
                            	<td>shown.bs.tooltip</td>
                                <td>This event is fired when the tooltip has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.</td>
                            </tr>
                            <tr>
                            	<td>hide.bs.tooltip</td>
                                <td>This event is fired immediately when the hide instance method has been called.</td>
                            </tr>
                            <tr>
                            	<td>hidden.bs.tooltip</td>
                                <td>This event is fired when the tooltip has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.</td>
                            </tr>
                            <tr>
                            	<td>inserted.bs.tooltip</td>
                                <td>This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
				<p>The following example will display an alert message to the user when the fade out transition of the tooltip has been fully completed.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="listening-to-tooltip-events-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="listening-to-tooltip-events-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=listening-to-tooltip-events-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myTooltip").on("hidden.bs.tooltip", function(){
        alert("Tooltip has been completely closed.");
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var myTooltip = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(myTooltip); 
    
    myTooltip.addEventListener("hidden.bs.tooltip", function(){
        alert("Tooltip has been completely closed.");
    });                           
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <!--Bottom Navigation-->
                <div class="bottom-link clearfix">
                    <a href="bootstrap-collapse.php.html" class="previous-page-bottom">Previous Page</a>
                    <a href="bootstrap-popovers.php.html" class="next-page-bottom">Next Page</a>
                </div>
                <!--End:Bottom Navigation--> 
                <!-- InstanceEndEditable -->
                <div class="bottom-ad clearfix">

     <div class="ad-label">Advertisements</div>

     <!--Rectangle Left-->
     <div class="rectangle-left fl">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Left -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="8162953958"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Left-->

     <!--Rectangle Right-->
     <div class="rectangle-right fr">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Right -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="3324015654"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Right-->

</div>

            </div>
            <!--End:Text Content-->
            <!--Feedback Form-->
			<div class="snippets">
	<a href="../snippets/gallery.php.html" target="_blank"><img src="../lib/images/bootstrap-code-snippets.png" alt="Bootstrap UI Design Templates" /></a>
</div>            <!--End:Feedback Form-->
        </div>        
        <div class="rightcolumn">
            <div class="sidebar">
    
    <div class="ad-label">Advertisements</div>

    <div class="skyscraper primary">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Premium Skyscraper -->
        <ins class="adsbygoogle"
            style="display:inline-block;width:160px;height:600px"
            data-ad-client="ca-pub-9107540490929984"
            data-ad-slot="4376141825"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <div class="skyscraper">
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- Bottom Skyscraper -->
     <ins class="adsbygoogle"
          style="display:inline-block;width:160px;height:600px"
          data-ad-client="ca-pub-9107540490929984"
          data-ad-slot="3387984471"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
</div>
</div>        </div>
    </div>
    <!--Footer-->
	<!--Footer-->
<div class="footer">
    <div class="appeal">
        <div class="wrapper">
            <p>Is this website helpful to you? Please give us a
            <a href="../like.php.html" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=250,width=600,top=150, left='+((screen.width/2)-300));return false;">like</a>,
            or share your <a href="../contact-us.php.html" target="_blank">feedback</a><em> to help us improve</em>.
            Connect with us on <a href="https://www.facebook.com/tutorialrepublic" target="_blank">Facebook</a> and <a href="https://twitter.com/tutrepublic" target="_blank">Twitter</a> for the latest updates.</p>               
        </div>
    </div>
    <div class="footer-inner">
        <div class="wrapper clearfix">                
            <div class="link-box">
                <h4>About Us</h4>
                <div class="clearfix">
                    <a href="../about-us.php.html">Our Story</a>                    
                    <a href="../terms-of-use.php.html">Terms of Use</a>
                    <a href="../privacy-policy.php.html">Privacy Policy</a>                    
                </div>
            </div>
            <div class="link-box">
                <h4>Contact</h4>
                <div class="clearfix">
                    <a href="../contact-us.php.html">Contact Us</a>                    
                    <a href="../contact-us.php.html" target="_blank">Report Error</a>
                    <a href="../advertise-with-us.php.html">Advertise</a>                    
                </div>
            </div>
            <div class="tool-box">
                <h4>Interactive Tools</h4>
                <div class="tools-list clearfix" id="tools">
                    <a href="../font-awesome-icons-classes.php.html" target="_blank">Font Awesome Icon Search Utility</a>
                    <a href="../html-formatter.php.html" target="_blank">HTML Formatter</a>
                    <a href="../faq/what-is-the-maximum-length-of-title-and-meta-description-tag.php.html">Title &amp; Meta Length Calculator</a>
                    <a href="../html-reference/html-color-picker.php.html">HTML Color Picker</a>
                    <a href="../twitter-bootstrap-button-generator.php.html" target="_blank">Bootstrap Button Generator</a>
                    <a href="../codelab.php%3Ftopic=sql&amp;file=select-all.html" target="_blank">SQL Playground</a>
                    <a href="../bootstrap-icons-classes.php.html" target="_blank">Bootstrap Icon Finder</a>
                    <a href="../codelab.php%3Ftopic=html&amp;file=hello-world.html" target="_blank">HTML Editor</a>
                </div>
            </div>
            <div class="footer-logo">
                <p><img src="../lib/images/logo.svg" alt="TutorialRepublic" /><p>
					<div>
						<a href="https://www.buymeacoffee.com/tutrepublic" class="bmc-btn" rel="nofollow" target="_blank">
    						<img src="../lib/images/bmc-btn.png" alt="BMC" />
						</a>
					</div>
            </div>
        </div>
    </div>           
        <div class="bottom-strip">
        <div class="wrapper">
            <div class="notice">Copyright &copy; 2022 Tutorial Republic. All Rights Reserved.</div>
            <div class="social-media">
                <em>Share This:</em>
                <a href="https://facebook.com/sharer.php?u=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-tooltips.php" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Facebook"><i class="icon-facebook"></i></a>
                <a href="bootstrap-tooltips.php.html#" id="tweet-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Twitter"><i class="icon-twitter"></i></a>
                <a href="bootstrap-tooltips.php.html#" id="email-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" rel="noreferrer" title="Gmail"><i class="icon-mail"></i></a>
            </div>
        </div>            
    </div>
    <script>
        var title = document.title.replace('- Tutorial Republic', '');
        document.getElementById('tweet-btn').href = 'https://twitter.com/share?text=' + title + '- &url=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-tooltips.php';
        document.getElementById('email-btn').href = 'https://mail.google.com/mail/?view=cm&fs=1&su=' + title + '&body=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-tooltips.php';
    </script>
</div>
<!--End:Footer-->
    
<div class="backdrop mobile-only"></div>

<!-- TutorialRepublic base script -->
<script>
// Adding CSS files
[	
	'/lib/styles/legacy/extended-1.1.css',
	'/lib/icomoon/style.css'
].forEach(function(href) {
	var link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = href;
	(document.getElementsByTagName('head')[0]).appendChild(link);
});

// Adding JS files
[
	'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
	'/lib/js/prism.js',
	'/lib/js/default-1.3.js'
].forEach(function(src) {
	var script = document.createElement('script');
	script.async = false; // important
	script.src = src;
	(document.getElementsByTagName('body')[0]).appendChild(script);
});
</script>


    <!--End:Footer-->
</body>
<!-- InstanceEnd --></html>