How do I change the css of an attribute element using jQuery?

Question

on my website, I have a few elements which have tooltips. Now, the way I am handling the tooltips is by using pure css and an attribute. The code below should help you understand:

    .my-container [tooltip]:before {
      bottom: 25%;
      font-weight: 600;
      border-radius: 2px;
      background: #585858;
      color: #fff;
      content: attr(tooltip);
      font-size: 12px;
      visibility: hidden;
      opacity: 0;
      padding: 5px 7px;
      margin-right: 12px;
      position: absolute;
      right: 100%;
      white-space: nowrap;
    }
    
    .my-container [tooltip]:hover:before,
    .my-container [tooltip]:hover:after {
      visibility: visible;
      opacity: 1;
    }

    
    <div class="my-container">
        <a href="#" class="buttons" tooltip="Submit form">Submit</a>
    </div>

This works nicely enough. Now, I want to change the css style of the tooltip dynamically using jQuery. To do this, I am trying the following code:

$('.my-container [tooltip]:before').css({
    'color' : 'red'
});

However, nothing changes. How can I do this using jQuery?

Javascript can not access pseudoelements like `:before` – adeneo Nov 03 '16 at 15:36 — adeneo, Nov 03 '16 at 15:36

score 3 · Answer 1 · answered Nov 03 '16 at 15:37

You cannot affect the style of pseudo-elements with JavaScript because they're not actually present in the DOM. Instead, add one or more classes to your CSS stylesheet and then add/remove the class from the element with jQuery. The class can drive the style change you want:

.my-container.red [tooltip]:before {
  color: red;
}

or whatever.

How do I change the css of an attribute element using jQuery?

1 Answers1