How to explain buttons

jPaulB · Aug 31, 2023

Hi Everybody,

I have several HTML INPUT buttons on my pages, and sometimes a single word attached to the button isn't enough.
This is a graphic of what I want to appear when someone hovers over the button

Is there a way that I can ADD an explanation that would appear when someone hovers over that button?
What would this kind of thing be called?

Saul H. · Aug 31, 2023

Assign JavaScript properties; distinct button tag:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <p id="pOne"></p>
        <button id="bOne">Name</button>
        <script>
            document.getElementById("bOne").addEventListener("mouseover", function() {
                var pOne = document.getElementById("pOne");
                pOne.textContent = "Write name here!";
            }
        </script>
    </body>
</html>

I am not entirely certain of the solution! Perhaps consult ChatGPT, very knowledgeable robot!

BigDady · Aug 31, 2023

Why not just use a better explanatory name for the button? Or check out tool-tips.

VBService · Sep 1, 2023

You can use:

simple, the title attribute

HTML:

 <button title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">Name</button>

tooltips
popup (is similar to tooltip): [ 1 ] [ 2 ] [ 3 ]
dialog box, message modal, etc.

jPaulB · Sep 4, 2023

Thanks guys.
I appreciate you for the time you've taken to guide me on this issue.

Saul - The JavaScript approach didn't work, I get an error: document.getElementByID is not a function. I'll have to figure out that one ... I've left a help-request in the JavaScript forum on this site.
BigDady - You're right, a better description would resolve this at the get-go. However, I want to see just how far I can go to get results to mirror what I visualize in my already scrambled brain. The same with tool-tips or just using the target="xxxx" argument inside the <input> tag. I would want to change the background-color, font-family, border styles.
VBService - as usual, you have given me a large plate of stuff to chew on. (I really appreciate you for that.) I get a strong impression that you are an educator, someplace out in our world. I hope so, and I hope it's with young people who might discover how far their imagination can take them.

Thanks again to all three of you.

Saul H. · Sep 4, 2023

jPaulB said:
Thanks guys.
I appreciate you for the time you've taken to guide me on this issue.

Saul - The JavaScript approach didn't work, I get an error: document.getElementByID is not a function. I'll have to figure out that one ... I've left a help-request in the JavaScript forum on this site.

BigDady - You're right, a better description would resolve this at the get-go. However, I want to see just how far I can go to get results to mirror what I visualize in my already scrambled brain. The same with tool-tips or just using the target="xxxx" argument inside the <input> tag. I would want to change the background-color, font-family, border styles.

VBService - as usual, you have given me a large plate of stuff to chew on. (I really appreciate you for that.) I get a strong impression that you are an educator, someplace out in our world. I hope so, and I hope it's with young people who might discover how far their imagination can take them.

Thanks again to all three of you.

I am rather absent-minded myself! I made a ridiculous and idiotic mistake. Rather inconvenient, but very subtle! I just forgot to conclude my script with '});'. I suppose you might try my script again?

VBService · Sep 4, 2023

Saul H. said:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <p id="pOne"></p>
        <button id="bOne">Name</button>
        <script>
            document.getElementById("bOne").addEventListener("mouseover", function() {
                var pOne = document.getElementById("pOne");
                pOne.textContent = "Write name here!";
            }
        </script>
    </body>
</html>

i think, it should be more like this (but this is IMHO)

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p id="pOne" style="visibility: hidden;">Write name here!</p>
    <button id="bOne">Name</button>
    <script>
      document.getElementById("bOne").addEventListener("mouseover", function() {
        var pOne = document.getElementById("pOne");
        pOne.style.visibility='';
      });
      document.getElementById("bOne").addEventListener("mouseout", function() {
        var pOne = document.getElementById("pOne");
        pOne.style.visibility='hidden';
      });         
    </script>
  </body>
</html>

but in pure css, we can do this, very simple, title like below

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <style>
      button {
        position: relative;
        height: 1.5rem;
      }
      button::after {
        content: attr(data-title);
        position: absolute;
        top: calc(1.5rem + .25rem);
        left: 50%;
        transform: translatex(-50%);
        padding: .5rem;
        border-radius: .5rem;
        background-color: black;
        color: white;
        z-index: 9999;
        opacity: 0;
        transition: opacity 250ms;
      }
      button:hover::after {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <button id="bOne" data-title="Write name1 here!">Name</button>
    <button id="bTwo" data-title="Write name2 here!">Name</button>
  </body>
</html>

VBService · Sep 4, 2023

CSS Anchor Is The Best New CSS Feature Since Flexbox.

BigDady · Sep 5, 2023

Thanks for that VB. I wonder why CSS wants to take over FS functions and do it with six(?) new rules. I can think of a few other applications for this, just have to get a new mind set - and that has always proven hard for me.

BigDady · Sep 5, 2023

BigDady said:
Thanks for that VB. I wonder why CSS wants to take over FS functions and do it with six(?) new rules. I can think of a few other applications for this, just have to get a new mind set - and that has always proven hard for me.

VBService · Sep 5, 2023

BigDady said:
I wonder why CSS wants to take over FS functions

But I am happy with css going in that way, because the entries implemented in css are always simpler (shorter code, simple to understand) and in this version they are executed natively by browsers.

First example that comes to mind :hover (against addEventListener "mouseover", "mouseout")
or animation against loops and setTimeout and etc.

jPaulB · Sep 5, 2023

Saul H. said:
I am rather absent-minded myself! I made a ridiculous and idiotic mistake. Rather inconvenient, but very subtle! I just forgot to conclude my script with '});'. I suppose you might try my scri

VBService said:

i think, it should be more like this (but this is IMHO)

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p id="pOne" style="visibility: hidden;">Write name here!</p>
    <button id="bOne">Name</button>
    <script>
      document.getElementById("bOne").addEventListener("mouseover", function() {
        var pOne = document.getElementById("pOne");
        pOne.style.visibility='';
      });
      document.getElementById("bOne").addEventListener("mouseout", function() {
        var pOne = document.getElementById("pOne");
        pOne.style.visibility='hidden';
      });        
    </script>
  </body>
</html>

but in pure css, we can do this, very simple, title like below

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   
    <style>
      button {
        position: relative;
        height: 1.5rem;
      }
      button::after {
        content: attr(data-title);
        position: absolute;
        top: calc(1.5rem + .25rem);
        left: 50%;
        transform: translatex(-50%);
        padding: .5rem;
        border-radius: .5rem;
        background-color: black;
        color: white;
        z-index: 9999;
        opacity: 0;
        transition: opacity 250ms;
      }
      button:hover::after {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <button id="bOne" data-title="Write name1 here!">Name</button>
    <button id="bTwo" data-title="Write name2 here!">Name</button>
  </body>
</html>

Thank you, VBService. I like this approach a whole lot, but I have a single issue with it.

CSS:

button::after {
  content: attr(data-title);

The width of the data-title box seems to be limited to the width of the button.
How can I manage to keep text like "Clear Form and Start Over" on a single line?

VBService · Sep 5, 2023

jPaulB said:
How can I manage to keep text like "Clear Form and Start Over" on a single line?

use width in css

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <style>
      button {
        position: relative;
        height: 1.5rem;
      }
      button::after {
        content: attr(data-title);
        position: absolute;
        top: calc(1.5rem + .25rem);
        left: 0;
        /*transform: translatex(-50%);*/
        width: 10rem; /* !!! */
        padding: .5rem;
        border-radius: .5rem;
        background-color: black;
        color: white;
        z-index: 9999;
        opacity: 0;
        transition: opacity 250ms;
      }
      button:hover::after {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <button id="bOne" data-title="Clear Form and Start Over">Name</button>
    <button id="bTwo" data-title="Write name2 here!">Name</button>
  </body>
</html>

jPaulB · Sep 5, 2023

VBService said:

use width in css

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   
    <style>
      button {
        position: relative;
        height: 1.5rem;
      }
      button::after {
        content: attr(data-title);
        position: absolute;
        top: calc(1.5rem + .25rem);
        left: 0;
        /*transform: translatex(-50%);*/
        width: 10rem; /* !!! */
        padding: .5rem;
        border-radius: .5rem;
        background-color: black;
        color: white;
        z-index: 9999;
        opacity: 0;
        transition: opacity 250ms;
      }
      button:hover::after {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <button id="bOne" data-title="Clear Form and Start Over">Name</button>
    <button id="bTwo" data-title="Write name2 here!">Name</button>
  </body>
</html>

Thanks, VBService.

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How can I arrange a series of radio buttons?	2	Jan 24, 2024
<Button ...> display is fine, except for two things	1	Oct 23, 2023
How to discover a CSS Selector name?	8	Sep 12, 2023
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
How to Design a Cross Network app	0	Aug 15, 2022
How to use Densenet121 in monai	0	Feb 16, 2024
Creating Buttons - please help	0	Jul 3, 2010

How to explain buttons

jPaulB

Saul H.

BigDady

VBService

jPaulB

Saul H.

VBService

VBService

BigDady

BigDady

VBService

jPaulB

VBService

jPaulB

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads