How to set relative position of tooltip in CSS/JS?

Question

I know there are lots of similar questions but I can't get it to work and hope you can help me.

I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.

The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.

Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.

function CopyToClipboard(id) {
  // do copy stuff here
  // [...]

  // showing tooltip
  var span_element = document.getElementById(id).parentElement.querySelector('span');
  if(span_element != null) {
    span_element.style.display = "inline";
    setTimeout( function() {
      span_element.style.display = "none";
    }, 2000);
  }
}

body {
  margin-left: 0px;
}

ul {
  padding-left: 20px;
}

div.container {
  margin: 10px;
  width: 98%;
  word-break: break-all;
}

.custom-tooltip {
  padding: 4px;
  background-color: grey;
  color: #fff;
  position: relative;
  bottom: 2em;
  right: 5em;
  display: none;
}

<html lang="de" class=" heujtnrdy idc0_345">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.90">
    <link rel="stylesheet" href="index_tmp.css">
    <script type="text/javascript" src="index_tmp.js"></script>
  </head>
  <body>
    <div class="container">
      <ul>
        <li>
          <span>Layer 1</span>
          <ul>
            <li>
              <span>Layer 2</span>
              <ul>
                <li>
                  <span>Layer 3</span>
                  <ul>
                    <li>
                      <div>
                        <table>
                          <tr>
                            <td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
                          </tr>
                        </table>
                      </div>
                    </li>
                    <li>
                      <div>
                        <table>
                          <tr>
                            <td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
                          </tr>
                        </table>
                      </div>
                    </li>
                    <li>
                      <div>
                        <table>
                          <tr>
                            <td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
                          </tr>
                        </table>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

-- Update 05.02.2023 --

Here my modified CSS, based on granite's alternative solution. This looks like this:

.modal {
  display: none;
  position: fixed;
  padding-top: 50%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  text-align: center;
  justify-content: center;
}

.modal-content {
  background-color: grey;
  border: 0.5px solid grey;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.0em;
  font-family: monospace;
  font-weight: 700;
  bottom: 1em !important;
  position: fixed;
}

3rd party tooltip libraries usually allow to show the tooltip on click. For example in Bootstrap's tooltip you can set trigger: "click" option. — Robo Robok
– Robo Robok, Commented Feb 1, 2023 at 18:41
Thanks for your reply but I'm trying to keep it simple and stay with pure JS. — lumen
– lumen, Commented Feb 1, 2023 at 19:33
Placing tooltips is not that easy sometimes, there are many edge cases when the element wouldn't fit on the screen, but it's up to you. — Robo Robok
– Robo Robok, Commented Feb 1, 2023 at 20:15

granite · Accepted Answer · 2023-02-02 15:32:32Z

1

As a secondary option (via modal): Html: 2 lines code. CSS: 7 extra lines code. JS: 10 extra lines code. Just need to get the JS CopyToClipboard to link up.

<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>

.modal {
  display: none;
  position: fixed;
  padding-top: 25%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #eff;
  text-align:center;
  margin: 0 auto;
  padding: 3px;
  width:4em;
}


var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
  modal.style.display = "block";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

edited Feb 2, 2023 at 15:32

answered Feb 2, 2023 at 4:14

granite

3921 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lumen Over a year ago

Thank you for the answer. Not what I had in mind but definitely an alternative which I am going to use until any other solution. I modified the CSS slightly to fit my needs (I put it in the next comment).

lumen Over a year ago

I added an update to the original post.

Collectives™ on Stack Overflow

How to set relative position of tooltip in CSS/JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related