Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 24, 2019 at 4:10 pm #1141427
    ariane1001

    Hi support,

    I know it’s possible to change colors of tooltips with css code below:

    #top .avia-tooltip,
#top .avia-tooltip .avia-arrow
{
background: #037ef3;
color:#fff;
}

    I would like to change color of a specific tooltip element on a page. I tried by giving the element a class, for example blue-tooltip, or giving the color section a class but it doesn’t work. 

    #top .blue-tooltip .avia-tooltip,
#top .blue-tooltip .avia-tooltip .avia-arrow
{
background: #037ef3;
color:#fff;
}

    My question: how can change color for a specific tooltip element.

    Thanks in advance.

    Regards, Ariane

    September 24, 2019 at 5:09 pm #1141447
    Jordan Shannon

    Hey ariane1001,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    September 24, 2019 at 5:58 pm #1141487
    ariane1001

    Hi Jordan,
    See the link below.
    Regards, ARiane

    September 24, 2019 at 6:06 pm #1141494
    Jordan Shannon

    Hi,

    Thanks. Which specific tooltip should be blue?

    Best regards,
    Jordan Shannon

    September 24, 2019 at 8:54 pm #1141580
    ariane1001

    Hi Jordan,

    There are 2 tooltip elements on this page:

    • a partner/logo element next to “Incubator support for innovative startups’ halfway down the page.
    • an image with hotspots is placed a little lower, in the next section at Engineering Talent

    When I use the following code, both tooltips became blue and I want the tooltip from the image with hotspots to stay white.

    #top .avia-tooltip,
#top .avia-tooltip .avia-arrow
{
background: #037ef3;
color:#fff;
}

    So I thought it would be a good idea to use a class but so I gave the partner/logo element at “Incubator support for innovative startups’ .blue-tooltip. But when I use the following code nothing is happening, so either the class is not working or I am putting it in the wrong place?

    #top .blue-tooltip .avia-tooltip,
#top .blue-tooltip .avia-tooltip .avia-arrow
{
background: #037ef3;
color:#fff;
}

    What can I do to give both elements with tooltips different mark-up?

    Thanks in advance,
    Ariane

    September 27, 2019 at 3:22 am #1142549
    Ismael

    Hi,

    Thank you for the update.

    You need to remove the space between the “.blue-tooltip” and the “.avia-tooltip” selectors because they are from the same element.

    #top .blue-tooltip.avia-tooltip,
#top .blue-tooltip.avia-tooltip .avia-arrow
{
background: #037ef3;
color:#fff;
}

    And it would probably be better if you apply another class name and style for the second tooltip.

    Best regards,
    Ismael

    September 27, 2019 at 8:40 am #1142594
    ariane1001

    H Ismael,
    Thanks for the update but this is not going to work.

    The class .blue-tooltip is assigned to the Partner/Logo element and not to the Tooltip it self.

    So what would be the difference between the CSS path of the Partner/Logo element and the CSS path of the Image with Hotspots?

    Thanks in advance,
    Ariane

    September 27, 2019 at 4:29 pm #1142801
    Jordan Shannon

    Hi,

    The problem is that the tooltips are generated completely outside of site container. This means that they can’t be individually targeted via an ID OR CLASS. Changing the color would require re-working and adjusting how the tooltips are generated in the first place within the theme files.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.