Sticky Tooltips On Click

Bootstrap Studio Help
1

I am a newbie at BSS and I have a website at EndlessSummer with tooltips enabled on the Tabs in the DOWNLOADS box on the left. When I hover the tabs the tooltips show up as desired and disappear when you stop hovering as desired. When I click on one of the tabs the tooltip shows and becomes sticky. How do I make it disappear when I click tabs?

chrome_VIy47ikU2j

Any help is greatly appreciated.

Thanks!

2

This jQuery script will hide the tooltips after you stop hovering, but if you’re using Bootstrap 5 you’ll need to enable jQuery in the settings.

$(document).on("click",function()
    {
    setTimeout(function()
    {

  $('[data-bs-toggle="tooltip"]').tooltip('hide');

},100);    // Hides tooltip in 100 milliseconds
    });

Maybe a JS wizard can figure out a way to do this in vanilla JS? @kuligaposten

1 Like
3

You have the tooltips on the links,move the tooltips to the icons instead then they will not be sticky when click on the links
an example

no need for jquery or vanilla JS

3 Likes
4

Thank-You Very Much!! This option is very helpful! And thanks for going the extra mile with providing the script!

5

Thank-You Very Much!! This option is very helpful! I especially like not having to use jquery or vanilla JS. And thanks for going the extra mile with example!

6

If I wanted to use this - After enabling JQuery in BSS5 - where do I put this code?

7

You create a new Javascript file (Design panel > right click Javascript > New > JS file) give it a name and then paste this code into it and click apply.

1 Like
8

Thank you so much for the quick reply. I will give this a shot. Eventually I will learn the basics of using this software etc. Thanks Again!

9

It worked fantastic! Exactly what I was looking for!!

10

You can do it in vanilla Javascript
like this

document.addEventListener(
  "DOMContentLoaded",
  () => {
    document.addEventListener("click", (e) => {
      const tooltip = bootstrap.Tooltip.getInstance(e.target);
      if (tooltip) setTimeout(tooltip.hide(), 100);
    });
  },
  false
);
12

Thank you for the option. I will give it try! As I have said above I am new to this. So I do have two questions - for all us newbies - what, if anything, are the advantages and/or disadvantages of using JQuery vs. vanilla Javascript and what does the “vanilla” stand for? Is it like just a descriptive word saying plain Javascript or is referring to some specific version of Javascript?

Thanks in advance for your reply!

13

The vanilla is as you say, just a descriptive word for plain javascript.

The advantage of using just js over jquery in the solutions you have been given, you have roughly the same amount of code give or take a few lines. But for the jquery option you have to additionally load the jquery file separately (approx 80kb) so the vanilla will give shorter load times.

jQuery has its place, but if you are not using it to its full potential, it is better to just use pure js.

14

Thank-You so much for taking the time to give this information. I know I, and I am sure future newbies who read this, appreciate the extra info.

15

I don’t suppose you could make this this is a component?

16

@timespider

I shared a button in the online library, search for Button with custom options

17

Thanks for going the extra mile!

18

Thanks kuligaposten