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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments