How to css tooltip

I want to create tooltip using title in html .
Ankur Rajput
Asked 03-02-2024
152

Answer (1)
Create tooltip using bootstrap and jquery  <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container">   <h3>Tooltip Example Using Bootstrap</h3>   Hover over me </div> <script> $(document).ready(function(){     $('[data-toggle="tooltip"]').tooltip();    }); </script>
Harsh Aggrawal
Asked 04-07-2018
45 Likes
Comments
Write comment

Answer (2)
<style> .tooltip {     position: relative;     display: inline-block;     border-bottom: 1px dotted black; } .tooltip .tooltiptext {     visibility: hidden;     width: 120px;     background-color: #555;     color: #fff;     text-align: center;     border-radius: 6px;     padding: 5px 0;     position: absolute;     z-index: 1;     bottom: 125%;     left: 50%;     margin-left: -60px;     opacity: 0;     transition: opacity 0.3s; } .tooltip .tooltiptext::after {     content: "";     position: absolute;     top: 100%;     left: 50%;     margin-left: -5px;     border-width: 5px;     border-style: solid;     border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext {     visibility: visible;     opacity: 1; } </style> <h2>Tooltip</h2> <xmp>Move the cursor over the text: <div class="tooltip">Hover over me   <span class="tooltiptext">Tooltip text</span> </div>
Harsh Aggrawal
Asked 04-07-2018
45 Likes
Comments
Write comment

Submit your answer