Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

Question

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos:

<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>

<div class="video">
 <iframe width="700" height="524" id="youtube_iframe" src="LINK HERE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="height: 446.897px;" aria-describedby="tippy-23">
</div>

I attempted to address this issue by applying some "fixes," however, the changing numbers in the "#tippy-" IDs make it challenging to consistently target and turn off the tooltips for youtube videos. Using selectors like "[data-tippy-root]" or "[id^=tippy]" removed all tooltips from the page entirely which is not my desired outcome. My goal is to specifically target tooltips displayed over youtube video embeds. How can I achieve this?

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

javascript html jquery css

Answer 1

Answer №1

When it comes to tooltips, the title attribute holds the key information while aria-describedby is purely for accessibility purposes. On Tumblr, only YouTube videos with a specific title attribute display the tooltip. By removing the title attribute and its value (in this case,

title="The Subway is Flooding

), the tooltip ceases to appear. Interestingly, Tippyjs conceals the title attribute from the dev tools' Element page, necessitating manual removal in the HTML source file.

To prevent a tooltip from appearing on an element, simply eliminate the title attribute from that particular element.

Additional Insight:

The Tumblr platform mentioned utilizes the following code snippet to deploy tooltips:

tippy("[title]", {
    ...commonOptions,
    content(reference) {
    const title = reference.getAttribute("title");
    reference.removeAttribute("title");
    return title;
},
});

This script sets up tooltips wherever a 'title' attribute is present. Therefore, defining each tooltip upfront is imperative as modifications post-creation are unfeasible. The dynamically generated "tippy-12" classes likely limit CSS control.

To exert greater influence over tooltips unlike Tumblr's approach, customizing them individually for distinct elements is advisable. This flexibility allows for better management of tooltips. Learn more about creating tooltips - Here

Answer 2

When it comes to tooltips, the title attribute holds the key information while aria-describedby is purely for accessibility purposes. On Tumblr, only YouTube videos with a specific title attribute display the tooltip. By removing the title attribute and its value (in this case,

title="The Subway is Flooding

), the tooltip ceases to appear. Interestingly, Tippyjs conceals the title attribute from the dev tools' Element page, necessitating manual removal in the HTML source file.

To prevent a tooltip from appearing on an element, simply eliminate the title attribute from that particular element.

Additional Insight:

The Tumblr platform mentioned utilizes the following code snippet to deploy tooltips:

tippy("[title]", {
    ...commonOptions,
    content(reference) {
    const title = reference.getAttribute("title");
    reference.removeAttribute("title");
    return title;
},
});

This script sets up tooltips wherever a 'title' attribute is present. Therefore, defining each tooltip upfront is imperative as modifications post-creation are unfeasible. The dynamically generated "tippy-12" classes likely limit CSS control.

To exert greater influence over tooltips unlike Tumblr's approach, customizing them individually for distinct elements is advisable. This flexibility allows for better management of tooltips. Learn more about creating tooltips - Here

Answer 3

Answer №2

If you want all ID values to start with "tippy-" and end in a random number, you can achieve this using the following CSS selector:

[id^="tippy-"]

The symbol ^ specifies that the selector should start with the specified 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>

Answer 4

If you want all ID values to start with "tippy-" and end in a random number, you can achieve this using the following CSS selector:

[id^="tippy-"]

The symbol ^ specifies that the selector should start with the specified 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>

Answer 5

Answer №3

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>

Incorporate attribute selectors into your CSS to style elements with matching IDs based on a specific pattern.

Answer 6

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>

Incorporate attribute selectors into your CSS to style elements with matching IDs based on a specific pattern.

Answer 7

Answer №4

Here is a handy selector to target all div elements with an id containing the text "tippy-"

 div[id*="tippy-"] {display: none !important;}

Note: When manipulating someone else's script (such as video embeds), it's best to use a flexible approach like this one (use an asterisk instead of a caret) to avoid future headaches.

Answer 8

Here is a handy selector to target all div elements with an id containing the text "tippy-"

 div[id*="tippy-"] {display: none !important;}

Note: When manipulating someone else's script (such as video embeds), it's best to use a flexible approach like this one (use an asterisk instead of a caret) to avoid future headaches.

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

No testing detected, ending with code zero - NPM and YARN

React child component does not refresh upon modification of an array property

Incorporating user names into socket.io chat for disconnect functionality

Leveraging reframe.js to enhance the functionality of HTML5 video playback

The Bootstrap 4 navbar remains consistently visible on mobile devices

HTML stops a paragraph when encountering a script within the code

Extract information from a webpage using JavaScript through the R programming language

What is the best way to define a variable in EJS?

Executing window.open from Html.Actionlink in ASP.NET MVC 4

Adding a simulated bottom border to a rotated container

What is the reason behind Ramda having multiple curry functions in its source code, much like Redux having multiple compose functions?

The ng-app directive for the Angular project was exclusively located in the vendor.bundle.js.map file

I'm having trouble understanding why my data does not appear even though there is space allocated for it automatically

display a container and navigate to the specific link

Methods for dynamically adjusting content based on window width in Three.js

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

Tips on configuring the path to incorporate Bootstrap CSS, JavaScript, and font files/classes into HTML when the HTML file and Bootstrap files are located in different directories

Tips for determining the duration between the Monday of last week and the Sunday of last week

The output.library.type variable in WebPack is not defined

Automatically tapping the Quora "expand" button through code