user2915962 user2915962 - 1 month ago 6
jQuery Question

remove hovering-effect from an element

I have a tooltip displaying on elements with a specific class.

The code for the tooltip looks like this:

// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});


Im looking for a way to disable the tooltip on certain elements.
My first attempts involved getting rid of the class
.masterTooltip

thinking that it would be enough.

After doing some reading I understand that it is not the class itself that is responsible for the hover-effect but the element which has the class.
So removing the class wont change anything.

Any tips on how to be able to remove and re-add the tooltip function?

Here is a fiddle with a simplified version:
https://jsfiddle.net/bald1/x04hxvqr/1/

Answer

Create a second class which should denote if a tooltip is active or not. On your hover function, display the tooltip only if the element has that active class. Toggle this class to turn the tooltip functionality on and off.

$(".masterTooltip").hover(function() {
    if ($(this).hasClass("tooltip-active")) {
        // your code to display tooltip
    }
} ...)

Here's a fiddle.


Here's an additional fiddle to show toggling the tooltip functionality.