Hovering on Div

Question

I am new to JS and need a help please. I am trying to get the content of the following div to appear when I hover on it, here is a snippet of my code.

const currentTab = await Logic.currentTab();
const currentPage = document.getElementById("current-page");
currentPage.innerHTML = `<span class="page-title truncate-text">${currentTab.title}</span>`;
const favIconElement = Utils.createFavIconElement(currentTab.favIconUrl || "");
currentPage.prepend(favIconElement);

#current-tab img {
max-block-size: var(--icon-size);
}
#current-page{
  display: table-cell;
}
#current-tab .page-title {
  font-size: var(--font-size-heading);
  grid-column: 2 / 4;
}

<span><div id="current-page"></div></span>

Answer 1

Intial Answer

Javascript,

document.getElementById("current-page").addEventListener("mouseover", function(e) {
   e.target.innerHTML = "change text";
});  

jQuery,

$('#current-page').hover(function(){
    $(this).html("change text")
})

Working sample: https://jsbin.com/yomeyesuxu/edit?html,css,js,output

Tooltip

You can follow something like this,

$('#current-page').hover(function(){
   $(this).find('.page-title').toggle()
})

.page-title {
  position: absolute;
  background: #000;
  color: #fff;
  top: 10px;
  left: 0;
  z-index: 999;
  display: none
}

#current-page {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="current-page">
  hover on me
  <span class='page-title truncate-text'>Test</span>
</div>

Only CSS,

.page-title {
  position: absolute;
  background: #000;
  color: #fff;
  top: 10px;
  left: 0;
  z-index: 999;
  display: none
}

#current-page {
  position: relative;
}

#current-page:hover .page-title {
  display: block;
}

<div id="current-page">
  hover on me
  <span class='page-title truncate-text'>Test</span>
</div>

Answer 2

With css you should be done with the hide/show logic, with us just populate the div

#current-page{
  display: none;
}
#current-page:hover{
  display: table-cell;
}