Change style of the pseudo element ::after of an attribute

Question

I am creating a simple tooltip system where you can attach an attribute to an element: <div data-tooltip-content="testing out tooltip.">

(ps i am using sass)

styling:

  content: attr(data-tooltip-content)
  color: white
  background: black
  padding: 5px
  position: absolute
  white-space: nowrap
  border-radius: .20rem
  margin-top: -2rem
  z-index: 14000 !important
  pointer-events: none

These tooltips are being used to display information on cards. These cards have will be expanded and collapsed when a user clicks on them. But when i now do el.style['z-index'] = '0'; in the javascript for the card being clicked. The tooltip is then being overlapped because the z-index of the tooltip has been overridden in the javascript, which then leads to the tooltip being overlapped by other things with higher z-index. Is there then a way I can change the styling of the tooltip in javascript

Answer 1

You cannot target and manipulate a pseudo-element because it doesn't actually exist in the DOM.

But you can inject a style block with javascript. That may do the trick.