Bootstrap Tooltips

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Tooltips

Post by C0D3D »

Creating tooltips with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enable Bootstrap Tooltips via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Some custom styles to beautify this example */
	.bs-example{
    	margin: 60px 0;
    }
    a, button{
        margin-right: 30px;
  	}
    i{
        font-size: 22px;
    }
</style>
<script>
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);
    });
});
</script>
</head>
<body>
<div class="mt-3 mx-5">
    <h2>Tooltips on Links</h2>
    <div class="bs-example">
        <a href="#" data-bs-toggle="tooltip" title="Default tooltip">Tooltip</a>
        <a href="#" data-bs-toggle="tooltip" title="Another tooltip">Another tooltip</a>
        <a href="#" data-bs-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</a>
        <a href="#" data-bs-toggle="tooltip" title="The last tip!">Last tooltip</a>
    </div>
    <h2>Tooltips on Buttons</h2>
    <div class="bs-example">
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Default tooltip">Tooltip</button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Another tooltip">Another tooltip</button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="The last tip!">Last tooltip</button>
    </div>
    <h2>Tooltips on Icons</h2>
    <div class="bs-example">
        <a href="#" data-bs-toggle="tooltip" title="Edit"><i class="bi-pencil-fill"></i></a>
        <a href="#" data-bs-toggle="tooltip" title="Save"><i class="bi-save-fill"></i></a>
        <a href="#" data-bs-toggle="tooltip" title="Print"><i class="bi-printer-fill"></i></a>
        <a href="#" data-bs-toggle="tooltip" title="Delete"><i class="bi-trash"></i></a>
        <a href="#" data-bs-toggle="tooltip" title="Settings"><i class="bi-gear-fill"></i></a>
    </div>
</div>
</body>
</html>

Setting the position of Bootstrap tooltips via data attributes

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placement of Bootstrap Tooltips via Data Attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px 60px;
    }
</style>
<script>
$(document).ready(function(){
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div class="bs-example"> 
    <ul class="list-inline">
        <li class="list-inline-item">
            <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</a>
        </li>
    </ul>
</div>
</body>
</html>
Setting the position of Bootstrap tooltips via JavaScript

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placement of Bootstrap Tooltips via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px 60px;
    }
</style>
<script>
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" });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <ul class="list-inline">
        <li class="list-inline-item">
            <a href="#" id="tipTop" data-bs-toggle="tooltip" title="Tooltip on top">Tooltip on top</a>
        </li>
        <li class="list-inline-item">
            <a href="#" id="tipRight" data-bs-toggle="tooltip" title="Tooltip on right">Tooltip on right</a>
        </li>
        <li class="list-inline-item">
            <a href="#" id="tipBottom" data-bs-toggle="tooltip" title="Tooltip on bottom">Tooltip on bottom</a>
        </li>
        <li class="list-inline-item">
            <a href="#" id="tipLeft" data-bs-toggle="tooltip" title="Tooltip on left">Tooltip on left</a>
        </li>
    </ul>
</div>
</body>
</html>

Setting the title text for Bootstrap tooltips via JavaScript

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Setting Title Text for Bootstrap Tooltips Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 100px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
  	var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        title : "It looks like title attribute is not present."
    });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <p>
        <a href="#" id="myTooltip" data-bs-toggle="tooltip">Hover over me</a>
    </p>
</div>
</body>
</html>


Inserting HTML content inside the Bootstrap tooltips via JavaScript

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placing HTML inside Bootstrap Tooltips Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        title: "<h4><img src='/examples/images/smiley.png' width='30' alt='Smiley'> Hello, <b>I'm</b> <i>Smiley!</i></h4>",
        html: true
    });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <p>
        <a href="#" id="myTooltip" data-bs-toggle="tooltip">Hover over me</a>
    </p>
</div>
</body>
</html>

Setting the show hide timing of Bootstrap tooltips via JavaScript

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Setting Show/Hide Time Delay for Bootstrap Tooltips Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
  	/* Some custom styles to beautify this example */
    .bs-example{
    	margin: 100px 50px;
    }
	.bs-example a{
		margin: 50px;
	}
</style>
<script>
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 // show, hide tooltip after 100 milliseconds
    });

    // Showing and hiding tooltip with different speed
    var largeTooltip = new bootstrap.Tooltip(largeTrigger, {
        delay: {show: 0, hide: 2000}
    });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <p>
        <a href="#" id="tinyTooltip" data-bs-toggle="tooltip" title="A small tooltip">Tooltip</a>
        <a href="#" id="largeTooltip" data-bs-toggle="tooltip" title="A large tooltip that displayed instantly on mouse hover but hide after 2000 milliseconds.">Large tooltip</a>
    </p>
</div>
</body>
</html>

Creating the custom template for Bootstrap tooltips via JavaScript

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Custom Template for Bootstrap Tooltips Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px;
    }
  	/* Styles for custom tooltip template */
    .tooltip-head{
        color: #fff;
        background: #000;
        padding: 10px 10px 5px;
        border-radius: 4px 4px 0 0;
        text-align: center;
        margin-bottom: -2px; /* Hide default tooltip rounded corner from top */
    }
    .tooltip-head h3{
        margin: 0;
        font-size: 18px;
    }
  	.tooltip-head i{
        font-size: 22px;
        vertical-align: bottom;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><i class="bi-info-circle"></i> Important Info</h3></div><div class="tooltip-inner"></div>'
    });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <p>
        <a href="#" id="myTooltip" data-bs-toggle="tooltip" title="This is a simple example of custom Bootstrap tooltip.">Hover over me</a>
    </p>
</div>
</body>
</html>


Setting the container element for Bootstrap tooltips via JavaScript

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Setting Bootstrap Tooltip's Container Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        container: "#wrapper"
    });
});
</script>
</head>
<body>
<div id="wrapper" class="bs-example"> 
    <p>
        <a href="#" id="myTooltip" data-bs-toggle="tooltip" title="This is a tooltip">Hover over me</a>
    </p>
  	<p><strong>Note:</strong> In this example dynamically generated tooltip HTML code will be inserted at the end of the "#wrapper" div instead of the body element. Inspect the DOM to see the actual result.</p>
    <p><strong>Note: </strong> Press Ctrl+Shift+I (Windows / Linux) or Cmd+Opt+I (Mac) to open Developer tools or DOM Inspector.</p>
</div>
</body>
</html>


Bootstrap show() tooltip method

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>




Bootstrap hide() tooltip method

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>

Bootstrap toggle() tooltip method

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>



Bootstrap dispose() tooltip method

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>


Bootstrap enable() tooltip method

Example 13

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>


Bootstrap disable() tooltip method

Example 14

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>


Bootstrap toggleEnabled() tooltip method

Example 15

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>

Bootstrap update() tooltip method

Example 16

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Tooltip Methods Using jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
$(document).ready(function(){
    $("#showTooltip").click(function(){
        $("#myTooltip").tooltip("show");
    });
    $("#hideTooltip").click(function(){
        $("#myTooltip").tooltip("hide");
    });
    $("#toggleTooltip").click(function(){
        $("#myTooltip").tooltip("toggle");
    });
    $("#enableTooltip").click(function(){
        $("#myTooltip").tooltip("enable");
    });
    $("#disableTooltip").click(function(){
        $("#myTooltip").tooltip("disable");
    });
    $("#toggleEnabledTooltip").click(function(){
        $("#myTooltip").tooltip("toggleEnabled");
    });
    $("#updateTooltip").click(function(){
        $("#myTooltip").tooltip("update");
    });
    $("#disposeTooltip").click(function(){
        $("#myTooltip").tooltip("dispose");
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p>Click on the following buttons to control the tooltip manually.</p>
    	<button type="button" class="btn btn-primary" id="showTooltip">Show</button>
        <button type="button" class="btn btn-warning" id="hideTooltip">Hide</button>
        <button type="button" class="btn btn-success" id="toggleTooltip">Toogle</button>
        <button type="button" class="btn btn-info" id="enableTooltip">Enable</button>
        <button type="button" class="btn btn-secondary" id="disableTooltip">Disable</button>
        <button type="button" class="btn btn-dark" id="toggleEnabledTooltip">Toogle Enabled</button>
        <button type="button" class="btn btn-warning" id="updateTooltip">Update</button>
        <button type="button" class="btn btn-danger" id="disposeTooltip">Dispose</button>
    </div>  
</div>
</body>
</html>


Bootstrap getInstance() tooltip method

Example 17

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Tooltip Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
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);
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p class="mt-4">First activate tooltip by hovering over the link, then press the "Get Tooltip Instance" button to get the tooltip instance associated with a DOM element.</p>
        <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    	<button type="button" class="btn btn-primary" id="myBtn">Get Tooltip Instance</button>
    </div>  
</div>
</body>
</html>


Bootstrap getOrCreateInstance() tooltip method

Example 18

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get or Create Bootstrap Tooltip Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 100px auto;
    }
</style>
<script>
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);
    });
});
</script>
</head>
<body>
<div class="bs-example text-center"> 
    <p>
        <a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Hover over me</a>
    </p>
    <div class="mt-4">
        <p class="mt-4">Press the "Get or Create Tooltip Instance" button to create tooltip instance or get the tooltip instance associated with a DOM element. <strong>Tooltip will not work until you create tooltip instance.</strong></p>
        <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    	<button type="button" class="btn btn-primary" id="myBtn">Get or Create Tooltip Instance</button>
    </div>  
</div>
</body>
</html>

Display a message when Bootstrap tooltip fade out transition has been completed

Example 19

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listening to Collapse Events Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCollapse = document.getElementById("myCollapse");

    myCollapse.addEventListener("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>
</head>
<body>
<div class="m-4">
    <!-- Trigger Buttons HTML -->
    <button type="button" class="btn btn-primary mb-4" id="myBtn" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>

    <!-- Collapsible Element HTML -->
    <div class="collapse show" id="myCollapse">
        <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click the trigger button to toggle this panel.</div>
    </div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot] and 0 guests