I need to display a tooltip on the button when the search field is empty.
Here is what I have attempted:
// Enable hover feature
const searchBtn = document.querySelector('.find__btn');
searchBtn.addEventListener('mouseover', () => {
const searchText = document.querySelector('.find__field');
console.log(searchText.value);
if (searchText.value.length === 0) {
jQuery(searchBtn).tipso({
titleContent: 'Hello',
});
}
});
The issue with this approach is that it only works the first time. If I type something in the search field and then hover over the button, the tooltip does not appear as expected. However, if I subsequently clear the search field and hover over the button again, the tooltip still does not show up.
So, it seems to work only the first time. How can I resolve this?