W3.CSS supports a different kind of tooltip using w3-tooltip class. Take a look at the following example. Here we've put a tooltiptext within a div and an image and applied w3-tooltip on the parent div.
<div class="w3-tooltip"> <div class="w3-text w3-container w3-teal" style="width:255px;"> <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p> </div> <div> <img src="html5-mini-logo.jpg" alt="html5"> </div> </div>
Example
w3css_tooltips.htm<html> <head> <title>The W3.CSS Tooltips</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> </head> <body class="w3-container"> <h2>Hover Demo</h2> <div class="w3-tooltip"> <div class="w3-text w3-container w3-teal" style="width:255px;"> <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p> </div> <div> <img src="html5-mini-logo.jpg" alt="html5"> </div> </div> </body> </html>
No comments:
Post a Comment