- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <h3>Tooltip Events</h3>
- <a href="#" data-toggle="tooltip" title="Hooray!">Tooltip Example</a>
- <div>
- <p>The <strong>show.bs.tooltip</strong> event occurs when the tooltip is about to be shown.</p>
- <p>The <strong>shown.bs.tooltip</strong> event occurs when the tooltip is fully shown.</p>
- <p>The <strong>hide.bs.tooltip</strong> event occurs when the tooltip is about to be hidden.</p>
- <p>The <strong>hidden.bs.tooltip</strong> event occurs when the tooltip is fully hidden.</p>
- <button type="button" class="btn btn-primary">Show</button>
- <button type="button" class="btn btn-warning">Hide</button>
- <button type="button" class="btn btn-success">Toggle</button>
- <button type="button" class="btn btn-danger">Destroy</button>
- </div>
- </div>
- <script>
- $(document).ready(function(){
- $(".btn-primary").click(function(){
- $("[data-toggle='tooltip']").tooltip('show');
- });
- $(".btn-warning").click(function(){
- $("[data-toggle='tooltip']").tooltip('hide');
- });
- $(".btn-success").click(function(){
- $("[data-toggle='tooltip']").tooltip('toggle');
- });
- $(".btn-danger").click(function(){
- $("[data-toggle='tooltip']").tooltip('destroy');
- });
- $("[data-toggle='tooltip']").on('show.bs.tooltip', function(){
- alert('The tooltip is about to be shown.');
- });
- $("[data-toggle='tooltip']").on('shown.bs.tooltip', function(){
- alert('The tooltip is now fully shown.');
- });
- $("[data-toggle='tooltip']").on('hide.bs.tooltip', function(){
- alert('The tooltip is about to be hidden.');
- });
- $("[data-toggle='tooltip']").on('hidden.bs.tooltip', function(){
- alert('The tooltip is now hidden.');
- });
- });
- </script>
- </body>
- </html>