How to position the *tooltip* comment on these buttons?

Joined
Aug 16, 2022
Messages
52
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?

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>
 
Joined
Aug 22, 2023
Messages
36
Reaction score
7
Will this prove successful?
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Javascript DOM 'Mouseover'</title>
</head>
<body>
    <input id="submita" type="submit">
    <p id="submitone"></p>
    <script>
        document.addEventListener("mouseover", function () {
            document.getElementById("submita").addEventListener("mouseover", function () {
                var submitb = document.getElementById("submitone");
                submitb.textContent = "Lorem ipsum...";
            });
        });
    </script>
</body>
</html>
 
Last edited:
Joined
Jul 4, 2023
Messages
341
Reaction score
39
Will this prove successful?
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Javascript DOM 'Mouseover'</title>
</head>
<body>
    <input id="submita" type="submit">
    <p id="submitone"></p>
    <script>
        document.addEventListener("mouseover", function () {
            document.getElementById("submita").addEventListener("mouseover", function () {
                var submitb = document.getElementById("submitone");
                submitb.textContent = "Lorem ipsum...";
            });
        });
    </script>
</body>
</html>
IMO in this case there is no necessary to use javascript events, in css :hover works fine, but OP I guess at this moment have problem how to use position in css.
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
Firstly, it is not good html programming practice to treat body tag in css this way
CSS:
body {
    position: absolute;
    left: 6.25rem;
    width: 50rem;
    height: 10rem;
}

proposal for change
CSS:
body {
  font-size: 0.75rem;
}
.form-container {
  position: relative;
  margin: 0 auto;
  width: 50rem;
  height: 10rem;
    
  border-radius: 1.25rem;
  border: 0.375rem solid;
  padding-top: 1.563rem;
  border-color: #FF0000;
  background-color: #94FFC9;
  box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
}
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
[ working code on-line ]
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;
      }
      .form-container {
        position: relative;
        margin: 0 auto;
        width: 50rem;
        height: 10rem;

        border-radius: 1.25rem;
        border: 0.375rem solid;
        border-color: #FF0000;
        background-color: #94FFC9;
        box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
      }
      .submitbtn {
        position: relative;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 1rem;
      }
      .submitbtn1 {
        width: 5rem;
        border-style: groove;
        border-width: 0.125rem;
        border-radius: 1.25rem;
        border-color: black;
        background-image: -webkit-linear-gradient(top left, #004001 ,#80FF81 );
        background-image: linear-gradient(to bottom right, #80FF81 , #004001 );
        font-weight: bold;
        color: black;
        transition: all 250ms;
      }
      .submitbtn1:hover {
        background-image: -webkit-linear-gradient(top left, #80FF00 ,#004001 );
        background-image: linear-gradient(to bottom right, #004001 , #80FF81 );
        color: #FFFF00;
      }
      .submitbtn1:after {
        right: 0;       
        padding: .5rem;
        border-color: #FF0000  ;
        background-color: #000000;
        color: #FFFFFF;
      }
      .submitbtn2 {
        height: 1.5rem;
        border-style: none;
        background-color: #94FFC9;
        color: #004001;
        text-decoration: underline;
        text-decoration-color: #004001;
        transition: all 250ms;
      }
      .submitbtn2:hover {
        color: #FF0000;
        text-decoration-color: #FF0000;
      }
      .submitbtn2:after {
        left: 0;
        padding: .25rem;
        border-color: #FF0000  ;
        background-color: #000000;
        color: #FFFFFF;
      }
      .submitbtn1:after,
      .submitbtn2:after {
        content: attr(data-title);
        width: 15rem;
        position: absolute;
        display: none;
        top: calc(1.5rem + .35rem);
        z-index: 9999;
        opacity: 0;
      }
      .submitbtn1:hover::after,
      .submitbtn2:hover::after {
        display: block;
        opacity: 1;
      }
    </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="submitbtn 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="submitbtn 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>

1699108596022.png
 
Last edited:
Joined
Aug 16, 2022
Messages
52
Reaction score
2
[ working code on-line ]
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;
      }
      .form-container {
        position: relative;
        margin: 0 auto;
        width: 50rem;
        height: 10rem;

        border-radius: 1.25rem;
        border: 0.375rem solid;
        border-color: #FF0000;
        background-color: #94FFC9;
        box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
      }
      .submitbtn {
        position: relative;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 1rem;
      }
      .submitbtn1 {
        width: 5rem;
        border-style: groove;
        border-width: 0.125rem;
        border-radius: 1.25rem;
        border-color: black;
        background-image: -webkit-linear-gradient(top left, #004001 ,#80FF81 );
        background-image: linear-gradient(to bottom right, #80FF81 , #004001 );
        font-weight: bold;
        color: black;
        transition: all 250ms;
      }
      .submitbtn1:hover {
        background-image: -webkit-linear-gradient(top left, #80FF00 ,#004001 );
        background-image: linear-gradient(to bottom right, #004001 , #80FF81 );
        color: #FFFF00;
      }
      .submitbtn1:after {
        right: 0;     
        padding: .5rem;
        border-color: #FF0000  ;
        background-color: #000000;
        color: #FFFFFF;
      }
      .submitbtn2 {
        height: 1.5rem;
        border-style: none;
        background-color: #94FFC9;
        color: #004001;
        text-decoration: underline;
        text-decoration-color: #004001;
        transition: all 250ms;
      }
      .submitbtn2:hover {
        color: #FF0000;
        text-decoration-color: #FF0000;
      }
      .submitbtn2:after {
        left: 0;
        padding: .25rem;
        border-color: #FF0000  ;
        background-color: #000000;
        color: #FFFFFF;
      }
      .submitbtn1:after,
      .submitbtn2:after {
        content: attr(data-title);
        width: 15rem;
        position: absolute;
        display: none;
        top: calc(1.5rem + .35rem);
        z-index: 9999;
        opacity: 0;
      }
      .submitbtn1:hover::after,
      .submitbtn2:hover::after {
        display: block;
        opacity: 1;
      }
    </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="submitbtn 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="submitbtn 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>

View attachment 2707
Hi VBService,
Will this prove successful?
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Javascript DOM 'Mouseover'</title>
</head>
<body>
    <input id="submita" type="submit">
    <p id="submitone"></p>
    <script>
        document.addEventListener("mouseover", function () {
            document.getElementById("submita").addEventListener("mouseover", function () {
                var submitb = document.getElementById("submitone");
                submitb.textContent = "Lorem ipsum...";
            });
        });
    </script>
</body>
</html>
Will this prove successful?
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Javascript DOM 'Mouseover'</title>
</head>
<body>
    <input id="submita" type="submit">
    <p id="submitone"></p>
    <script>
        document.addEventListener("mouseover", function () {
            document.getElementById("submita").addEventListener("mouseover", function () {
                var submitb = document.getElementById("submitone");
                submitb.textContent = "Lorem ipsum...";
            });
        });
    </script>
</body>
</html>
Hi Saul,
Thank you for your reply. You responded to an earlier inquiry as well, also with a DOM approach.
Without question, your code is MUCH cleaner than the CSS approach I'm fooling with. And SLIM! DOM appears to need far less lines than the 50-80 lines I have in the CSS file.
At this point, the DOM approach is so far beyond me that it's like trying to learn how to read and understand Klingon. I don't even know where to start.
You have inspired me to pick away at it, though. It looks to be a very necessary thing to know.
btw: I took a look at your site, popculturenews.github.io
It looks pretty ambitious and I loved the article "GoingAboutLifeInASociety....html". I feel for all of that.
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
[ working code on-line ]
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;
      }
      .form-container {
        position: relative;
        margin: 0 auto;
        width: 50rem;
        height: 10rem;

        border-radius: 1.25rem;
        border: 0.375rem solid;
        border-color: #FF0000;
        background-color: #94FFC9;
        box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
      }
      .submitbtn {
        position: relative;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 1rem;
      }
      .submitbtn1 {
        width: 5rem;
        border-style: groove;
        border-width: 0.125rem;
        border-radius: 1.25rem;
        border-color: black;
        background-image: -webkit-linear-gradient(top left, #004001 ,#80FF81 );
        background-image: linear-gradient(to bottom right, #80FF81 , #004001 );
        font-weight: bold;
        color: black;
        transition: all 250ms;
      }
      .submitbtn1:hover {
        background-image: -webkit-linear-gradient(top left, #80FF00 ,#004001 );
        background-image: linear-gradient(to bottom right, #004001 , #80FF81 );
        color: #FFFF00;
      }
      .submitbtn1:after {
        right: 0;      
        padding: .5rem;
        border-color: #FF0000  ;
        background-color: #000000;
        color: #FFFFFF;
      }
      .submitbtn2 {
        height: 1.5rem;
        border-style: none;
        background-color: #94FFC9;
        color: #004001;
        text-decoration: underline;
        text-decoration-color: #004001;
        transition: all 250ms;
      }
      .submitbtn2:hover {
        color: #FF0000;
        text-decoration-color: #FF0000;
      }
      .submitbtn2:after {
        left: 0;
        padding: .25rem;
        border-color: #FF0000  ;
        background-color: #000000;
        color: #FFFFFF;
      }
      .submitbtn1:after,
      .submitbtn2:after {
        content: attr(data-title);
        width: 15rem;
        position: absolute;
        display: none;
        top: calc(1.5rem + .35rem);
        z-index: 9999;
        opacity: 0;
      }
      .submitbtn1:hover::after,
      .submitbtn2:hover::after {
        display: block;
        opacity: 1;
      }
    </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="submitbtn 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="submitbtn 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>

View attachment 2707
Hi VBService,
Thanks for this code. I've replaced all of my submitbtn code with yours. I didn't know I could combine classes like this
class="submitbtn submitbtn1". There are several other areas that I can apply the same brevity.
Not clear to me where my original code went wrong. What part of the your code controls where and how the tooltip-text appears?
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
What part of the your code controls where and how the tooltip-text appears?
1. Container position for position: relative
CSS:
.form-container {
  position: relative;
  ...
}
2. position: relative for buttons (submitbtn1, submitbtn2)
CSS:
.submitbtn {
  position: relative;
  ...
}
3. position: absolute for buttons (submitbtn1, submitbtn2) :after
CSS:
.submitbtn1:after,
.submitbtn2:after {
  position: absolute;
  ...
}
4.
CSS:
.submitbtn2:after {
  left: 0;
  ...
}
1699284959639.png


CSS:
.submitbtn1:after {
  right: 0;    
  ...
}
1699284991437.png


[ CSS :before and CSS :after – How to Use the Content Property ]
 
Last edited:
Joined
Aug 22, 2023
Messages
36
Reaction score
7
Hi VBService,


Hi Saul,
Thank you for your reply. You responded to an earlier inquiry as well, also with a DOM approach.
Without question, your code is MUCH cleaner than the CSS approach I'm fooling with. And SLIM! DOM appears to need far less lines than the 50-80 lines I have in the CSS file.
At this point, the DOM approach is so far beyond me that it's like trying to learn how to read and understand Klingon. I don't even know where to start.
You have inspired me to pick away at it, though. It looks to be a very necessary thing to know.
btw: I took a look at your site, popculturenews.github.io
It looks pretty ambitious and I loved the article "GoingAboutLifeInASociety....html". I feel for all of that.
Thank you very much! 😊
 
Joined
Aug 22, 2023
Messages
36
Reaction score
7
At this point, the DOM approach is so far beyond me that it's like trying to learn how to read and understand Klingon. I don't even know where to start.
Refer to my 'Mandatory Elements To Conduct Javascript DOM & Form Manipulation' thread.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,717
Messages
2,569,381
Members
44,699
Latest member
ChristaBya

Latest Threads

Top