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

Html – Appending innerText on hover and removing in on mouse-out JS

I’m making a nav button that when it is hovered, instead of there just being an icon there, there will also be some text to the right of it. Once the cursor leaves the button, it will go back to just displaying the icon.

HTML

<button title="Style Guide" id="style-guide" hover-text="Style Guide">
  <i class="fa-solid fa-border-top-left"></i>
</button>

JAVASCRIPT

document.querySelectorAll("[hover-text]").forEach((element) => {
  element.addEventListener("mouseover", () => {
    element.innerText += element.getAttribute("hover-text");
  })
  element.addEventListener("mouseout", () => {
    element.innerText = element.innerText.replace(element.getAttribute("hover-text"), "")
  })
})
Tags:

3

Answers


  1. 0

    Use innerHTML instead.

    <!DOCTYPE html>
<html>
  <body>
    <button title="Style Guide" id="style-guide" hover-text="Style Guide">
      <i class="fa-solid fa-border-top-left"></i>
    </button>
    <script>
      document.querySelectorAll("[hover-text]").forEach((element) => {
        element.addEventListener("mouseover", () => {
          element.innerHTML = element.innerText + element.getAttribute("hover-text");
        })
        element.addEventListener("mouseout", () => {
          element.innerHTML = element.innerText.replace(element.getAttribute("hover-text"), "")
        })
      })
    </script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    You should give hover-text to i tag. So your html file should be like this:

    <button title="Style Guide" id="style-guide">
  <i hover-text="Style Guide" class="fa-solid fa-border-top-left">About</i>
</button>

    And the Javascript file:

    const buttons = document.querySelectorAll("i[hover-text]");

const addHoverText = (element) => {
  const hoverText = element.getAttribute("hover-text");
   element.innerText += hoverText;
 }

const removeHoverText = (element) => {
  const hoverText = element.getAttribute("hover-text");
  element.innerText = element.innerText.replace(hoverText, "")
 }
 
buttons.forEach((button) => {
  button.addEventListener("mouseover", () => {
    addHoverText(button)
  });
   button.addEventListener("mouseout", () => {
     removeHoverText(button)
  })
});
    Login or Signup to reply.
  3. 0

    Instead of using element.innerText += ... why not append an actual element to the button when hovered and on mouseout, remove the child:

    document.querySelectorAll("[hover-text]").forEach((element) => {
  element.addEventListener("mouseover", () => {
    let tooltip = document.createElement('div')
    tooltip.innerHTML = element.getAttribute("hover-text")
    tooltip.classList.add('hover-text')
    element.appendChild(tooltip)
  })
  element.addEventListener("mouseout", () => {
    element.removeChild(element.querySelector('.hover-text'))
  })
})

    On mouseover, this code should add a div with a class name hover-text and on mouseout it should remove the div.hover-text element. You can change the element name by changing let tooltip = document.createElement('div') to let tooltip = document.createElement('span') or some other element name. You can also add styles and add a .hover-text {...} and code some styles

    This will work well for simple stuff, but if you want a better tooltip, you will have to look for a better way to do that

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search