Styling the Tooltip Window possible?

Bootstrap Studio Help
1

I’ve added a tooltip to a link in my project and the tooltip that is showing up is horrible looking as you can see below, but I can find no way to style it better. Seems like the HTML setting that it should be taking for adding html to them doesn’t work for me, or I’m just plain not doing it right, not sure which but most likely the latter lol. Any assistance on how to get this started would be appreciated.

This is what I want to do (or similar, anything at all would be better than the other)

CleanShot 2021-09-02 at 11.06.05

This is what I’m getting with no ability to change it so far that I’ve tried.

CleanShot 2021-09-02 at 11.09.33

Any pointers would be greatly appreciated. I haven’t worked with these in BS5 so it’s different than when it used the Popover classes etc.

2
2 Likes
3

Thanks Kuli, that helps a lot. Is there no way to do this with the Tooltip setup within BSS though? If not I’ll set this up and go with it, but seems there should be some way to do it default.

4

@jo-r
You can add the data attribute data-bs-html=“true” and write your html code in the title field, but I think it will be easier to use a popover then you don’t need to write html code in the title field

5

yeah this popover setup worked pretty good, I think I must have just been missing the JS part when I was trying to do this earlier as it’s very similar to what I had tried. Trying to redo my own site which has been really put off way too long lol. Very old BS version and wasn’t done in BSS (was before I found it) so things weren’t quite fitting together right. What you gave me is working perfectly though, thanks so much!

6

Will show u later if i wont forget how easily u can style tooltips with css etc.

7

All help is appreciated @dickykreedz thanks very much!

8

To style the tooltip in Bootstrap 5
Let say you want a red tooltip with white text
add this CSS

.tooltip .tooltip-inner {
  color: white;
  background-color: red;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: red;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: red;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: red;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: red;
}
1 Like
9

Thanks @kuligaposten I’ll check that out too. I’ll assume you can do the same for the text color and size and font etc.?

10

You can add that to the .tooltip .tooltip-inner
like this

.tooltip .tooltip-inner {
  color: white;
  background-color: red;
  font-size: 1rem;
  font-family: cursive;
}
11

Awesome, thanks so much, I was hoping there was a way to do the default BS5 tooltips, but I got the other way working too so I’m all set! bow’s to the mighty Kuli :stuck_out_tongue:

2 Likes