Horje Website
Bootstrap 3 Ref Js Tooltip Css Stacked – Bootstrap Ref Js Tooltip – Bootstrap JS Tooltip Reference – Bootstrap Code

Bootstrap 3 Ref Js Tooltip Css Stacked – Bootstrap Ref Js Tooltip

Bootstrap 3 Ref Js Tooltip Css Stacked - Bootstrap Ref Js Tooltip - Bootstrap JS Tooltip Reference - Bootstrap Code


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Bootstrap Example</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  10. <style>
  11. /* Tooltip */
  12. .test + .tooltip > .tooltip-inner {
  13. background-color: #73AD21;
  14. color: #FFFFFF;
  15. border: 1px solid green;
  16. padding: 15px;
  17. font-size: 20px;
  18. }
  19. /* Tooltip on top */
  20. .test + .tooltip.top > .tooltip-arrow {
  21. border-top: 5px solid green;
  22. }
  23. /* Tooltip on bottom */
  24. .test + .tooltip.bottom > .tooltip-arrow {
  25. border-bottom: 5px solid blue;
  26. }
  27. /* Tooltip on left */
  28. .test + .tooltip.left > .tooltip-arrow {
  29. border-left: 5px solid red;
  30. }
  31. /* Tooltip on right */
  32. .test + .tooltip.right > .tooltip-arrow {
  33. border-right: 5px solid black;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39. <h3>Tooltip CSS Example</h3>
  40. <ul class="list-inline">
  41. <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
  42. <li><a class="test" href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
  43. <li><a class="test" href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
  44. <li><a class="test" href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
  45. </ul>
  46. </div>
  47. <script>
  48. $(document).ready(function(){
  49. $('[data-toggle="tooltip"]').tooltip();
  50. });
  51. </script>
  52. </body>
  53. </html>



Try Your Self ->



Published:
 October 6, 2020
Author:
 admin
Category:
 Bootstrap 3 JavaScript Reference, Bootstrap Source Code
Views:
 23

This article was posted in Bootstrap 3 JavaScript Reference, Bootstrap Source Code and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Horje © 2011 - 2023