- Joined
- Aug 16, 2022
- Messages
- 58
- Reaction score
- 2
Hi Everybody,
I have two simple buttons on a form, <Reset Form> and <Submit>. As a visitor hovers over either button, a tooltip-text will appear to explain what that button is for.
The issue I have speaks to where the tooltip-text will appear. If you hover over <Reset Form>, the tooltip-text appears under the button, aligned to the left margin of the button.
However, if you hover over <Submit> the tooltip-text appears at the top left of the form. It will not line up to the <Submit> button at all.
What I want to do is position the tooltip-text of <Submit> the same way the tooltip-text of <Reset Form> appears, under the button and aligned to the left margin of the button. Where and how is that positioning managed in the CSS?
I have two simple buttons on a form, <Reset Form> and <Submit>. As a visitor hovers over either button, a tooltip-text will appear to explain what that button is for.
The issue I have speaks to where the tooltip-text will appear. If you hover over <Reset Form>, the tooltip-text appears under the button, aligned to the left margin of the button.
However, if you hover over <Submit> the tooltip-text appears at the top left of the form. It will not line up to the <Submit> button at all.
What I want to do is position the tooltip-text of <Submit> the same way the tooltip-text of <Reset Form> appears, under the button and aligned to the left margin of the button. Where and how is that positioning managed in the CSS?
CSS:
.form-container {
border-radius: 1.25rem;
border: 0.375rem solid;
height: 100%;
width: 100%;
padding-top: 1.563rem;
border-color: #FF0000;
background-color: #94FFC9;
box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
}
.submitbtn1 {
width: 5rem;
border-style: groove;
border-width: 0.125rem;
border-radius: 1.25rem;
border-color: #000000;
background-image: -webkit-linear-gradient(top left, #004001 ,#80FF81 );
background-image: linear-gradient(to bottom right, #80FF81 , #004001 );
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 1rem;
color: #000000;
}
.submitbtn1:hover {
background-image: -webkit-linear-gradient(top left, #80FF00 ,#004001 );
background-image: linear-gradient(to bottom right, #004001 , #80FF81 );
color: #FFFF00;
}
.submitbtn1:after {
content: attr(data-title);
position: absolute;
display: none;
top: calc(1.5rem + .25rem);
left: 0;
width:15rem;
padding: .5rem;
border-color: #FF0000 ;
background-color: #000000;
color: #FFFFFF;
z-index: 9999;
opacity: 0;
}
.submitbtn1:hover::after {
display: block;
opacity: 1;
}
.submitbtn2 {
position: relative;
height:1.5rem;
margin: auto;
border-style: none;
border-color: #000000;
background-color: #94FFC9;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1rem;
color: #004001;
text-decoration: underline;
text-decoration-color: #004001;
}
.submitbtn2:hover {
color: #FF0000;
text-decoration-color: #FF0000;
}
.submitbtn2:after {
content: attr(data-title);
position: absolute;
display: none;
top: calc(1.5rem + .25rem);
left: 0;
width: 15rem;
padding: .5rem;
border-color: #FF0000 ;
background-color: #000000;
color: #FFFFFF;
z-index: 9999;
opacity: 0;
}
.submitbtn2:hover::after {
display: block;
opacity: 1;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="test1.css" type="text/css">
<!--Used to define the dimensions of the Registration PopUp box-->
<style>
body {
font-size: 0.75rem;
position: absolute;
left: 6.25rem;
width: 50rem;
height: 10rem;
}
</style>
<title>Test-1</title>
</head>
<body>
<div class="form-container">
<br>
<br>
<br>
<br>
<div class="row justify-content-center">
<div class="col-sm-4">
<p style="text-align: left">
<button id="bOne" type="input" class="submitbtn2" data-title="Clear Form and Start Over"><i>Reset Form</i></button>
</p>
</div>
<div class="col-sm-4">
<p style="text-align: right">
<button id="bTwo" type="submit" class="submitbtn1" data-title="Submit your Registration"> Submit </button>
</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>