Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to hide the visibility of a DIV element that's attached to a random number string?

I have tooltips enabled on my website but I want to hide the tooltip pop-ups specifically displaying over video embeds. I have tried inspecting the webpage and got this following code that only appears when those elements are hovered over.

<div data-tippy-root id="tippy-8" style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(712px, -688.8px, 0px);"> </div>

So I tried adding in these "fixes" but the random numbers attached to "#tippy-" change every time, and make it nearly impossible to target and toggle off its visibility for good. So how can I go about targeting every number possible attached to "#tippy-" to keep this element hidden?

#tippy-9, #tippy-8 {
    display: none !important;}
#data-tippy-root {
    display: none !important;
    visibility: none !important;}
Tags:

3

Answers


  1. 0 
    div[id^="tippy-"] {
  color: red
}
    <div id="tippy-1"> para 1</div>
<div id="tippy-2"> para 2</div>
<div id="tippy-3">para 3</div>

    You can use attribute selectors in CSS to target elements with IDs that match a specific pattern.

    Login or Signup to reply.
  2. 0

    If all the ID start with "tippy-" and end in a random number you can use something like

    [id^="tippy-"]

    The ^ indicates that the selector must start with the designated value.

    div {
  width: 50px;
  display: inline-block;
  height: 50px;
  border: 1px solid grey;
}

[id^="tippy-"] {
  background: lightblue;
}
    <div id="tippy-1"></div>
<div id="tippy-2"></div>
<div id="tippy-3"></div>
<div id="tippy-456789"></div>
<div id="tippy-5"></div>
<div id="non-tippy"></div>
    Login or Signup to reply.
  3. 0

    Try:

    let v = document.querySelector('div[id^="tippy-"]');
console.log(v);
    #tippy-9, #tippy-8 {
    display: none !important;}
#data-tippy-root {
    display: none !important;
    visibility: none !important;}
    <div data-tippy-root id="tippy-8" style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(712px, -688.8px, 0px);"> </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search