How Do I Add A Tool Tip To A Span Element ? - GeeksforGeeks

Trang chủ » Html I Element Tooltip » How Do I Add A Tool Tip To A Span Element ? - GeeksforGeeks

Có thể bạn quan tâm

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

In this article, we will learn about how do we add a tooltip to a span element.

Tooltip: A tooltip is a text message and is placed inside an inline element with class=”tooltiptext”. The HTML <span> element is an inline container used to mark up a part of a text, or a part of a document.

Classes Used:

  • tooltip: This class is used to provide visible text.
  • tooltiptext: This class is used to provide visibility when someone hovers over tooltip class content.

Approach:

  • First, create an HTML file with some CSS properties.
  • Add a span element to your webpage.
  • In the last step, add the tooltip class and tooltiptext class to the webpage.

Example 1: The following example demonstrates the tooltip classes. We have used tooltip text which means whenever you hover over the text, then it will show the hidden text. The CSS visibility is set to “hidden” initially in the style part of the HTML code. In the same part, it is mentioned that if the user hovers over it, the visibility property is set to “visible” which makes it appear as adding a tooltip.

HTML

<!DOCTYPE html> <html> <head> <style> body { background-color:black; color: white; } .tooltip { position: relative; display: inline-block; border-bottom: 2px solid black; } .tooltip .tooltiptext { visibility: hidden; width: 100px; background-color: green; color: lightgreen; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3> How do I add a tool tip to a span element? </h3> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">This is tooltiptext.</span> </div> </center> </body> </html>

Output:

Example 2: In the below example, we will use tooltiptext with buttons. In simple words, whenever you hover over the button it will show the functionality of that button.

HTML

<!DOCTYPE html> <html> <head> <style> body { background-color:black; color: white; } .tooltip { position: relative; display: inline-block; border-bottom: 2px solid black; } .tooltip .tooltiptext { visibility: hidden; width: 100px; background-color: green; color: lightgreen; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3> How do I add a tool tip to a span element? </h3> <p>Move the mouse over the text below:</p> <button class="tooltip">CUT image <span class="tooltiptext"> This button is used to cut an image </span> </button> <button class="tooltip">CROP image <span class="tooltiptext"> This is used to crop the image </span> </button> <button class="tooltip">GiF image <span class="tooltiptext"> This is used to convert an image to GiF </span> </button> </center> </body> </html>

Output:

Comment More info Next Article How to stop text from taking up more than 1 line ? author krishna_97 Follow Improve Article Tags :
  • CSS
  • Web Technologies
  • CSS-Questions

Từ khóa » Html I Element Tooltip