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"), "")
  })
})