How to css tooltip

I want to create tooltip using title in html .

Ankur Rajput

Asked 14-11-2024

206

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