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

jPaulB

jPaulB

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>
 
Saul H.

Saul H.

Joined
Aug 22, 2023
Messages
42
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:
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
Saul H. said:
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>
Click to expand...
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.
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
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;
}
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
[ 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:
jPaulB

jPaulB

Joined
Aug 16, 2022
Messages
52
Reaction score
2
VBService said:
[ 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
Click to expand...
Hi VBService,
Saul H. said:
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>
Click to expand...
Saul H. said:
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>
Click to expand...
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.
 
jPaulB

jPaulB

Joined
Aug 16, 2022
Messages
52
Reaction score
2
VBService said:
[ 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
Click to expand...
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?
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
jPaulB said:
What part of the your code controls where and how the tooltip-text appears?
Click to expand...
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:
Saul H.

Saul H.

Joined
Aug 22, 2023
Messages
42
Reaction score
7
jPaulB said:
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.
Click to expand...
Thank you very much! 😊
 
Saul H.

Saul H.

Joined
Aug 22, 2023
Messages
42
Reaction score
7
jPaulB said:
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.
Click to expand...
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

Similar Threads

<Button ...> display is fine, except for two things 1
Can I modify the tooltip display on an <input type="xx"> statement? 2
How can I arrange a series of radio buttons? 2
Positioning CSS components 1
Buttons lining up 1
Having difficulty with the layout of these images / video for this web page 2
Help needed with thank you message 5
"input-group-text" help 7

Members online

No members online now.
Total: 25 (members: 0, guests: 25)
Robots: 321

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,062
Latest member
OrderKetozenseACV

Latest Threads

Top