Question 343448 in Html Question posted in
Some basic documentation can be found here.

Html – How can I add a tooltip to an element using Javascript?

I want to add a standard HTML/CSS tooltip:

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

The only difference is that the item I want to add it to is being created by a library so I can’t modify the element in html to create the element with the "tooltip" class. But I know the id of the element so I can grab it from the DOM. How can I add a tooltip to an item I query from the DOM?

I have tried creating the span in the above example and adding it as a child after getting the desired element from the DOM but that didn’t work.

In my HTML I have the tooltiptext orphaned:

<span class="tooltiptext" id="tooltiptext">Tooltip text</span>

And then in javascript I wrote:

    var tooltiptext = document.getElementById("tooltiptext");
    tooltiptext.id  = "newId"; //Another StackOverflow question said I should to this
    var anchor = document.getElementsByClassName("tooltipTarget")[0]; //Debugging shows I'm getting the correct element
    anchor.appendChild(tooltiptext); 
    anchor.classList.add("tooltip");
Tags:

3

Answers


  1. 0

    You can create a cool tool tip without js in it looks great.

    This is an example of how you can achieve it

    .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
    <!DOCTYPE html>
<html>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

    I hope it helped you

    Login or Signup to reply.
  2. 0 
    const myDiv = document.getElementById("myDiv");
      myDiv.addEventListener("mouseover", showTooltip);
      function showTooltip() {
         const tooltip = document.querySelector(".tooltip");
         tooltip.style.display = "block";
      }
    .tooltip {
         display: none;
         background-color: yellow;
         color: black;
         position: absolute;
      }
    <div id="myDiv">
      This is my div
      <span class="tooltip">This is my tooltip</span>
  </div>
    Login or Signup to reply.
  3. 0

    Since you say "standard HTML/CSS tooltip".

    The standard HTML tooltip is created by using the title attribute on any HTML element.

    <p title="Tooltip text">Hover over me</p>

    So if you got the ID of the element that you want to add the tooltip to, you can do this:

    let targetElement = document.getElementById('someId');
targetElement.setAttribute('title', 'The tooltip text you want to add');
    <div id="someId">Target element</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search