Morning forum!
I want to customise the tooltip.
I managed to change to background colour, the font and the font colour by making the changes in the class .tooltip-inner.
I would also like to change the colour of the little triangle below. How can I target that? Which class is that?
I believe it’s .caret
I good bootstrap resource is here.
Casey
Thank you for the link!
Making changes in .caret did not affect the triangle at all.
It seems to be .tooltip-arrow.
However when I change to colour the triangle becomes a line…
The tooltip arrow class is used as to draw the arrow with borders. The following CSS code should change your arrow to red:
.tooltip.top .tooltip-arrow {
border-top-color:red;
}
.tooltip.top-left .tooltip-arrow {
border-top-color:red;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:red;
}
.tooltip.right .tooltip-arrow {
border-right-color: red;
}
.tooltip.left .tooltip-arrow {
border-left-color: red;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: red;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: red;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: red;
}
You could put this in the page Add custom code to head & body area (head code).
Just change the color to what you want, and surround the code with style tags
<style>
</style>Thank your for your answer!
The code works fine.
I tried different colours but the red plays rather nicely with the design of the site.
So, I changed it back to red.
Btw, I tried to achieve the same effect using the style settings in the class manager but could not get it to work. I don’t know wether that is a bug or just me being dumb.
It seems that “.tooltip-arrow” has been deleted from Bootstrap 4 for some reason:
Hello @JDW check my help here:
https://forum.blocsapp.com/t/blocs-3-2-beta-build-4/6573/20?u=pealco
@Pealco, your link is dead, so I will add the CSS that works to change the color of the tooltip and its arrow, regardless of arrow direction…
.tooltip-inner {
background-color: #802C00 !important;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #802C00 !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: #802C00 !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: #802C00 !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: #802C00 !important;
}
Just change all instances of 802C00 to your preferred HEX color.
The one thing I want to do but cannot figure out is how to restrict that CSS to a particular Bloc ID. You see, I want to use that code to color my tooltips only on my MegaMenu, which has a dark background. I then want to leave all other tooltips on the page to their default black color, since the page body has a white background. Any thoughts on how to achieve that would be appreciated.
Thanks.
You can either use a class or an ID for this… Just add it before the class, so
<style>
#myIDhere .tooltip-inner {
background-color: #802C00 !important;
}
</style>O believe me, I’ve tried just that, but it’s not working for some reason. I even tried dropping all the MegaMenu content inside a DIV, then giving that DIV an ID, then using that ID just as you describe. When I do that, the color reverts back to the default black!
For example…
<style>
#ttt .tooltip-inner {
background-color: #802C00 !important;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #802C00 !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: #802C00 !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: #802C00 !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: #802C00 !important;
}
</style>
Where the ID is shown here:
And on preview, you see the body of the tooltip returns to black!
I can’t figure out why!
What shows when you inspect the page?
I’m curious. Never styled them before. Just assumed you could target them.
When I preview in Safari and then hit Option-Command-I to bring up the Console, I do not see any page errors, if that’s what you mean.
So long as I don’t use any ID (#ttt in the above example) the code works great to style the body and the arrow. It’s only my attempt to restrict the CSS changes to my MegaMenu (i.e., a specific ID) that fails, for reasons I cannot understand.
It’s almost 8pm here in Japan, and it always takes me a long time to create a cut-down, single-page version of my site for others to review, so I will do that tomorrow morning and then post a link to that here. Maybe that will shed some further insight into what’s going on.
Here’s a single-page example Blocs 3.5.5 document:
https://kiramek.com/21test95/ExamplePage.zip
Do this:
Prior to creating that DIV and adding the “ttt” ID, I tried using the containing Row’s “products-dd” ID in the CSS, but that too did not work. So I am utterly confounded as to why.
Simply put, I want to RESTRICT the CSS such that it ONLY applies to the MegaMenu and not tooltips that appear anywhere on that page outside the MegaMenu. How can I do that?
Thanks.
5 HOURS LATER…
I’m ready to rip my hair out over this. All these hours spent on finding a solution and still nothing. The latest thing I tried was adding a “data-container” Attribute via the right sidebar’s Custom Attributes section, as per this StackOverflow, but that only worked to eliminate the Tooltip entirely! Ack!
The lack of replies indicates one of two things:
