Menu
How would I make text appear under a link?
<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div>
Where the login triggers the p to show?
Do I need to use the p or something else?
614
Using <A> Tag Basically, what you're going to want to do is to create a link with an empty reference attribute (so clicking it doesn't take you anywhere), and use the title attribute to create whatever mouseover text you would like.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
It's called a CSS Tooltip, and it is "a common graphical user interface element displayed as an informational text box when hovering over an item. It is used in conjunction with a cursor, usually a pointer."
that's simple just add title attribute in tag
<a href="http://www.studyofcs.com" title="Tricks Site">Studyofcs</a>
The following style makes the p visible on hover:
.login a p {display:none;}
.login a:hover p {display:block;}<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div> Or if you want the whole link including p inside stay visible together on hover use the following:
.login a p {display:none;}
.login a:hover p {display:block;}
.login a:hover {display:block;}<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div> In case you are using bootstrap you can use the following:
<a class="login" href="" data-toogle="tooltip" title="Access your profile here">Login</a>
6
Simple Html Tooltip
<a href="https://stackoverflow.com/" title="Where Developers Learn, Share, & Build Careers">stackoverflow</a>
Tooltip Using Bootstrap :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>You can achieve hover tooltip By Bootstrap+JQuery also :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
