Having trouble with adding and removing bootstrap tooltip attributes using JavaScript. The tooltip is added on mouseover, but not removed on mouseleave.
The script adds the tooltip attributes on mouseover and should remove them on mouseleave.
'use strict'
document.addEventListener("DOMContentLoaded", function () {
// Function to get element font
const getfont = (element, property) => {
return window
.getComputedStyle(element, null)
.getPropertyValue(property)
}
// Function to get element ID
const getId = (obj) => {
return obj.id
}
// Add or remove tooltip
const addTooltip = (element) => {
element.setAttribute("data-bs-toggle", "tooltip")
element.setAttribute("data-bs-placement", "bottom")
element.setAttribute("data-bs-title", "Tooltip on top")
new bootstrap.Tooltip(element)
console.log(`Tooltip added`)
// Remove the tooltip when the mouse leaves the element
element.addEventListener("mouseleave", (event) => {
const element = event.target
element.removeAttribute("data-bs-toggle");
element.removeAttribute("data-bs-placement");
element.removeAttribute("data-bs-title");
new bootstrap.Tooltip(element);
console.log(`Removed`)
})
}
// Event listeners
addEventListener("mouseover", (event) => {
console.log(getId(event.target));
})
addEventListener("mouseover", (event) => {
const element = event.target
const id = getId(element)
if (id) {
addTooltip(element)
}
})
})