I’m looking to implement that some of the terms I’m using to be clickable (the text as a clickable link) and when clicked: that a pop-up info box with a definition of these terms appear.
Any suggestions how to do this?
If you need something more substantial than tooltips. There are popovers. It’s part of Bootstrap, but not officially implemented in Blocs. You can make it work though.
How many terms are you using? Because you could also use a modal and some dynamic text using JavaScript.
Really depends on the look you are going for.
Thanks @PeteSharp, that looks good. However in the examples there I can only find buttons. I don’t want the terms to be explained to be a button, just clickable text. Is that possible to implement also? At the moment there’s around 10 terms or so that I’d like to use this for.
Doesn’t have to be a button. It uses attributes.
I’ve not done it this way. But you should be able to put the text in a span and apply the attributes.
That’s great @PeteSharp, exactly what I’m after.
However I can’t integrate it into my Blocs project. From what I can see is that you put the <script> section into the footer, I’ve copied that. And then adding these Custom Attributes to the spanned text: data-bs-toggle, data-bs-placement, title, data-bs-content … and put the custom class which changes the color of the text. I’ve copied all those into my project but nothing happens. Is there something I’ve missed?
Oh is your project Bootstrap 5 or 4?
There are differences. Personally I would be only building with 5 now, unless you couldn’t for some dependancy reason.
Bootstrap 4 docs - Popovers · Bootstrap v4.6
Bootstrap 5 (I started it in Bootstrap 4 but upgraded it to version 5).
Double check the attributes are named right.
You can also add this one, if you want it to work on hover
data-bs-trigger="hover focus"
Hm, weird it started to work after I changed the placement to top and now I can also use bottom. It doesn’t work in preview mode in Blocs though, but works in browser preview (Firefox). Thanks alot for your help @PeteSharp!
Yes, your project also works in preview for me, but not my other one. I don’t know why… 
Do you have any idea of how to also apply the data-trigger="focus" to be able to get rid of the popup by clicking anywhere on the page as in this example. I’ve tried to use it with add both data-trigger=focus and data-bs-trigger=focus as a Custom Attribute, but neither works for me.
Those are the old attributes for BS4/3.
eg, its now data-bs-trigger="focus"
Everything you need is in the docs
I see, but I can’t get the data-bs-trigger="focus" to work neither in your nor my project… It disables the pop up function all together. Maybe something more that needs to go under <script>?
I found out, that ''focus" doesn’t work on spans, but it will on buttons. There is a “hack” to make it work, but its not good for accessibility.
I would use “hover” personally, makes it easy.
But if you really really need to use focus add this attribute.
tabindex="-1"
Again this isn’t an ideal practise. But it does make it work.
Thanks! I’d prefer hover actually, but then there’s no way to open the info box on mobile devices, right?
On mobile it should open on click.
Cool, I’ll play around a bit and update here later.
This is really strange. It works fine with hover in preview (in browser) now. But when I export the project and put on my web server it doesn’t work at all in Firefox (the same browser as I use for previewing). And I get this annoying pop up by the main menu on the page looking like this.
Screenshot of preview mode:
Screenshot of viewing the exported page:
Screenshot of tool tip appearing by the main menu:
