CODEWITHSUNDEEP
jquerycss
user541597
user541597

Reputation: 4355

Selecting class hover after from jquery

I have a class called customtooltip, in my css I have 

.customtooltip:hover::after{

// this emulates a tooltip, so it is a popup with info

}

I want to be able to control that from jquery. Currently I can only select the .customtooltip or use the .hover event on the tooltip, but I want to be able to re-position the popup/tooltip to where the mouse is and I believe I need jquery for this.

thanks,

Upvotes: 0

Views: 52

Answers (2)

David Thomas
David Thomas

Reputation: 253486

You can't; css pseudo-elements don't exist in the DOM, and are therefore inaccessible to JavaScript.

You can retrieve some of the properties, using window.getComputedStyle():

var elem = document.querySelector('.customtooltip'),
    currentTop = window.getComputedStyle(elem, ':after').top;

But you can't set properties.

That said, the CSS Pseudo-Elements Module Level 4 starts with:

  1. Additions to the CSS Object Model

Pseudo-elements should be reachable by script, stylable from script, and available as event targets.

Note We may extend this section in the future to allow creation of pseudo-elements from script.

So, hopefully, this limitation will change in the near future.

References:

Upvotes: 1

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

For re-positioning your element with class .customtooltip you need to first get the mouse position and than changing it according to current.

$(".customtooltip").hover(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    $(this).css({
        "position": "absolute",
        "top": x,
        "left": y,
    });
});

Hope it helps.

Upvotes: 0

Related Questions