Hovering on Div

user_11319732 0
Viewed 79

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>

javascript
2 Answers

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;
}
user_13699890

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>

user_31486420
Related