Tooltip Styling
Question
Application Type
Reactive

Hello,

Can someone please advise how to style tooltips? 

What I am after is a white background with a border around whole tooltip (body+arrow).

I was able to do this, but this is not the desired outcome.


Also, I can't figure out how to use ExtendedClass property in tooltips. At the moment I am modifying "tooltip-wrapper" class. I tried to add a custom class, but changes are not applied. 

Many thanks,

Sasha

Hello Alexandra Bayles,

.tooltip-wrapper.[position-name]:after {
    border-[position]: 7px solid var(--color-blue-light) ;
}

.tooltip-wrapper {
    border: 1px solid var(--color-blue-light);
    color: var(--color-neutral-9);
    background-color: var(--color-neutral-0) ;
}

Add these styles in your style sheet . [position-name] is the position you are assigning to tooltip.

Hope this helps you.

Regards,

Harika

Hi Harika,

Thank you for your response. 

The CSS you suggested had no effect on the filled colour of the arrow, it still looks the same. I'm trying to create the border around the whole tooltip, something like that. 


Attaching the sample oml . Here is Sample screen . If you haven't figured out. Do share your sample oml.

TooltipStyles.oml

Hi Harika,

Your sample demonstrates exactly the same style as I published in the original post. The arrow is filled with colour (which I don't need). 

mvp_badge
MVP

Hi Alexandra,

In addition to the previous comment by @Harika. To chain the custom style class i.e. ExtendedClass with the actual widget style class, refer the below-mentioned implementation for your use case.

CSS snippet (Define the same in screen/app/ StyleSheet section)

.custom-tooltip .tooltip-wrapper {
    background-color: #fff;
    color: #000;
    border: 1px solid #80D7F7;
}

.custom-tooltip .tooltip-wrapper:after {
    border-bottom-color: #80D7F7;
}

See this sample screen


I hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith, 

Thank you for your response.

I am aware that this is how it's supposed to work. However as soon as I add custom class to the stylesheet, the changes are withdrawn and everything goes back to default. 

For now I only can apply changes modifying "tooltip-wrapper" class. That's why I asked the question re the ExtendedClass property, I struggle to get it working. 


Regards,
Sasha

Adding custom class to the stylesheet, the changes are not withdrawn, In service studio it's shows the default styles but after publishing you can see the styles being applied in browser.  

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.