Created
September 30, 2019 07:03
-
-
Save imamuddinwp/e6e3beb8f5c61f3816a14092c22fc3c0 to your computer and use it in GitHub Desktop.
Bootstrap Tooltip | Imam Uddin, imamcu07
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
<title>Bootstrap Tooltips</title> | |
</head> | |
<body> | |
<h1 class="display-3 text-center my-4">Bootstrap Tooltips!!!</h1> | |
<div class="container"> | |
<!-- BOOTSTRAP TOOLTIPS --> | |
<button class="btn btn-primary" title="Top Tooltip!!!" data-placement="top" data-toggle="tooltip" >Tooltip On Top</button> | |
<button class="btn btn-success" title="Bottom Tooltip!!!" data-placement="bottom" data-toggle="tooltip" >Tooltip On Bottom</button> | |
<button class="btn btn-warning" title="Left Tooltip!!!" data-placement="left" data-toggle="tooltip" >Tooltip On Left</button> | |
<button class="btn btn-danger" title="Right Tooltip!!!" data-placement="right" data-toggle="tooltip" >Tooltip On Right</button> | |
</div> | |
<!-- BOOTSTRAP TOOLTIPS WITH HTML --> | |
<h1 class="display-3 text-center my-4">Bootstrap Tooltips With HTML!!!</h1> | |
<div class="container"> | |
<button class="btn btn-primary" title="<h2>Top Tooltip!!!</h2>" data-placement="top" data-html="false" data-toggle="tooltip" >HTML Code</button> | |
<button class="btn btn-success" title="<h2>Top Tooltip!!!</h2>" data-placement="bottom" data-html="true" data-toggle="tooltip" >HTML Data</button> | |
<button class="btn btn-warning" title="<h2>Lorem Text</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, labore!</p> " data-placement="bottom" data-html="true" data-toggle="tooltip" >Heading And Paragrap</button> | |
<button class="btn btn-danger" title="<h2>Lorem Text</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, labore! Lorem ipsum dolor aliquid rerum alias illo a non recusandae obcaecati libero. Necessitatibus dolorum omnis nihil.</p> " data-placement="bottom" data-html="true" data-toggle="tooltip" >Heading And Paragrap</button> | |
</div> | |
</div> | |
<!-- Optional JavaScript --> | |
<!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
<script> | |
$('[data-toggle="tooltip"]').tooltip(); | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment