Hello UK Sentinel, the behavior you reported is a known problem, it happens because the?count?badge?covers the button and captures the mouse events.
The click event is attached to the count badge because you may enable the click to see who added reactions, in the Premium version.
One of the solutions I suggest in this case is to add some custom CSS to change the size and position of the badge. You can check this article: https://www.da-reactions-plugin.com/knowledge-base/faq/how-can-i-resize-the-count-badge/
Another solution that worked for another user is to add a little JavaScript to?hide?the?count?badge?for a few moments when the mouse hovers over it.
Use the snippet below. When the mouse hovers over a Reaction, the?badge?is?hidden?for two seconds. You can change the duration of the effect by altering the milliseconds value (2000 = 2 seconds).
// Function to hide and show the count badge
function toggleCountVisibility(countDiv) {
countDiv.style.display = 'none';
setTimeout(function () {
countDiv.style.display = 'block';
}, 2000); /// <--- Change milliseconds here
}
// Delegate mouseover event to activate the effect
document.addEventListener('mouseover', function (event) {
var reactionDiv = event.target.closest('.reaction');
var reactionCount = event.target.closest('.count');
if (reactionDiv && !reactionCount) {
var countDiv = reactionDiv.querySelector('.count');
if (countDiv) {
toggleCountVisibility(countDiv);
}
}
});
If you have any other suggestions about the UX, I will be happy to receive any feedback, as I want this plugin to be useful for many.
Thank you for using my plugin.
