Adding CSS override to tippy.js tooltip

Design help Custom code
1

Hi, I hope this is the right place for this problem …

I want to create a large “tooltip” (card appear when hover on text in a paragraph), and I’ve been able to get half way there by using the Booster app + tooltip. When I want to start tinkering with the text size and padding, I bumped into this article but I don’t know where to add the CSS override :frowning: . I tried using the code embed section but I guess I just don’t know how to use it correctly?

The goal is to get from left (tippy.js implementation) to the right (intended design)? New to this and is pulling my hair to make it happen :sob: Any help would be very appreciated!

website read-only link
published site

webflow post
webflow post3765×2319 336 KB

2

Hello Angela,

You can override the card style and text color by targeting your cards ids and adding css to the head part of your webflow project.

Here is how to do it…

Add this code to the head section of the page

<style>
  #tippy-1, #tippy-2, #tippy-3, #tippy-4 {
    color: black !important;
    font-size: 16px !important;
    padding: 15px !important;
    background-color: white !important;
    border-radius: 5px !important;
  }
</style>

Change the CSS properties as needed.

Don’t forget to publish first.

Bests,

1 Like
3

hi, unfortunately I don’t think I have the ID for each of my tooltip :(

I tried using the ID for the link (entry point), and it just changed style of the link and not the tooltip itself … as expected.

Screenshot 2024-08-23 at 8.29.45 PM
Screenshot 2024-08-23 at 8.29.45 PM1920×1110 104 KB

Screenshot 2024-08-23 at 8.30.04 PM

I also then tried using .tippy-tooltip to reference the tooltip (as shown in this link) but that doesn’t work either … finding it very hard to target the tooltip itself for styling :(

The github ticket did mention something about “use custom CSS on a NON-SCOPED scenario”, which I’m not exactly sure what it means … any insight?

thank you!

4

Hello there,

If you’re still working on this, you can find the IDs by using google inspector tool.

The IDs are automatically generated by the library you’re using.

Hope this helps,

Bests,

5

Hey,

You will need to wrap ‘AI/ML’ into a span element and give a class name, also give another class name to the rest of the text and to the title ‘Angela Fox’, you need to apply hover to the span element on CSS and you apply a gray color to these elements.

It is a difficult thing to explain through text, there are different knowledge and advanced one of CSS, Html and Javascript, it is more for a developer or you can investigate.