Using w3-tooltip for interactive UI elements
The w3-tooltip class in W3.CSS web development scripts help web developers add or display tooltips to web elements on a webpage. When an internet user moves the mouse pointer over a webpage element or directly interacts with that element object, it provides additional information in the form of a tooltip added to that web element object. Adding tooltips to an existing webpage can improve the web user experience by providing a hint information, description, or short web object element explanation or some guide or instruction in a text context without any additional modification.
Basic Tooltip in W3.CSS Web Development.
When an internet user moves the mouse pointer over an element on a W3.CSS based webpage or website, it displays a simple tooltip text information on that object element. Web developers can use the w3-tooltip class with the title attribute to display textual content information in a tooltip on a webpage.
Example of a Basic Tooltip in W3.CSS Web Development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h2>Now you just move the mouse pointer button to see the tooltip text info</h2><br>
<button class=”w3-button w3-pink w3-tooltip” title=”Python Programming”>Python</button>
<button class=”w3-button w3-indigo w3-tooltip” title=”W3.css Web Development Script”>W3.css</button>
</body>
</html>
Explanation of Basic Tooltip in W3.CSS Web Development.
- w3-tooltip – In this example, the w3-tooltip class applies tooltip text information to existing web elements (here, two different buttons). When the user moves the mouse pointer over these buttons, it adds a tooltip text information to these buttons, which is displayed on them.
- title – Here, the created text defined within the title attribute of the w3-tooltip class is used as the tooltip. This title text is displayed when the user moves the mouse over the button.
Customizing the Position of a Tooltip in W3.CSS.
Web developers can manually customize the default position of a tooltip on an existing object element using the w3-tooltip class in W3.CSS. Remember, a webpage defaults to displaying tooltip text at the top of the info web element. However, in W3.CSS, web developers can manually customize these tooltip behaviors using classes like w3-left, w3-right, w3-top, and w3-bottom.
Example of customizing tooltip position in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class Multiple Tooltip Direction</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<br><br>
<h2>Now you move the mouse button to see the tooltip text info in left, right, top & bottom, different </h2>
<button class=”w3-button w3-orange w3-tooltip w3-top” title=”Tooltip with Top Direction”>Tooltip Example with Top Direction </button>
<button class=”w3-button w3-indigo w3-tooltip w3-left” title=”Tooltip with Left Direction”>Tooltip Example with Left Direction</button>
<button class=”w3-button w3-red w3-tooltip w3-right” title=”Tooltip with Right Direction”>Tooltip Example with Right Direction</button>
<button class=”w3-button w3-lime w3-tooltip w3-bottom” title=”Tooltip with Bottom Direction”>Tooltip Example with Bottom Direction</button>
</body>
</html>
Explanation of customizing tooltip position in W3.CSS.
- w3-top – In this example, the default tooltip displays the web element’s object location in the top direction.
- w3-left – Displays a user-defined tooltip in the web element’s left direction.
- w3-right – Displays a user-defined tooltip in the web element’s right direction.
- w3-bottom – This displays the user defined tooltip in the bottom location of the web object element.
Tooltips with icons in W3.CSS web development.
In W3.CSS web development scripts, web developers can display icon tooltips on a web element, button, or object, or even on other elements to make the default user interface of a webpage or website more interactive and effective.
Example of a tooltip with icons in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class with Icons Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”>
</head>
<body>
<h2>At Below you move mouse over the icons to see the text-based tooltips text info</h2>
<i class=”w3-tooltip w3-large w3-black w3-hover-shadow fa fa-address-book” title=”Address book symbol”></i>
<i class=”w3-tooltip w3-large w3-hover-shadow fa fa-university” title=”Bank icon”></i>
<i class=”w3-tooltip w3-large w3-hover-shadow fa fa-calendar” title=”Calendar icon”></i>
<h2>Some examples with icon class</h2>
<i class=”fa fa-trash” aria-hidden=”true”></i>
<i class=”fa fa-file” aria-hidden=”true”></i>
<i class=”fa fa-btc” aria-hidden=”true”></i>
<i class=”fa fa-apple” aria-hidden=”true”></i>
</body>
</html>
Explanation of a tooltip with icons in W3.CSS.
- Font Awesome Icons – In this example, the fa class is used to display symbolic icons from the Font Awesome icon library.
- w3-tooltip – Text-based tooltip information is displayed on icons used from the icon library by adding a tooltip to the icon, just like any other web element.
- title – This displays tooltip text content information on an existing icon when the web user moves their mouse pointer over the icon.
Tooltip information with custom content in W3.CSS.
Instead of using the title attribute for simple tooltip text on a W3.CSS-based webpage website, web developers can create and display their own tooltip containing custom content, such as an image, text, or HTML web element.
Example of a tooltip with custom text content in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class Custom Tooltip Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body class=”w3-padding”>
<h2>Let move mouse pointer on button to see the custom image tooltip info </h2>
<button class=”w3-button w3-pink w3-tooltip”>
Home Icon Button
<span class=”w3-text w3-white w3-padding w3-card-4″
style=”width:200px; left:50%; transform:translateX(-30%);”>
<strong>Home Image Icon</strong>
<br>
<img src=”https://cdn-icons-png.flaticon.com/128/2163/2163350.png”
alt=”home image”
style=”width:100px; margin-top:10px;”>
</span>
</button>
<br><br>
<button class=”w3-button w3-yellow w3-tooltip”>
Doctor Image Button
<span class=”w3-text w3-white w3-padding w3-card-4″
style=”width:200px; left:50%; transform:translateX(-30%);”>
<strong>Doctor Image</strong>
<br>
<img src=”https://images.pexels.com/photos/6749778/pexels-photo-6749778.jpeg”
alt=”Doctor Image”
style=”width:100px; margin-top:10px;”>
</span>
</button>
</body>
</html>
Explanation of a tooltip with custom text content in W3.CSS.
- Custom HTML in Tooltip – This dynamically displays a tooltip with an icon or image, as in this example. It uses HTML web content within an existing tooltip. For example, (<br><img src=”…”) online image icons with dynamic location, etc.
- Interactive Tooltip – This makes the content of the tooltip displayed on a webpage more flexible, allowing web developers to incorporate an icon, image, web link, or other HTML element.
