Delayed hover response

Need help
1

I want to display explainer cards when the element is hovered. However, I only want to display it after it has been hovered for some time (eg 5 secs). I don’t think this is possible with bubble in built features.
I tried animations but they keep going on even if I stopped hovering the element, also it is still not a delayed response just a slower one.
I also tried introducing a delay but I cannot check whether it is still hovered after the delay. I tried adding a hide element when the element is stopped being hovered but while it helped with the animations it would still be buggy if I hovered too quickly.

I tried custom JS as well. However it would only work if I created all elements involved in the code within that HTML block. It seems like .getelementbyID() does not work on bubble elements.

Any help or suggestion is appreciated!

2

Add the Bubble plugin ‘Mouse & Keyboard Interactions’ and you’ll be able to do this natively.

It seems like .getelementbyID() does not work on bubble elements.

.getElementById()(which is the correct method… not .getelementbyID()) works just fine in Bubble.

3

Hi @adamhholmes,

thank you for your quick response. I was using getElementById(), sorry for the confusion I caused by misspelling it.
I found that it is not working using the getElementById() but it is working using querySelector().
One more issue I am facing is that it only works when I want to hide the element but not of it is hidden and I want to make it appear.

The code I am using is:

<script>
// Get the element
const testElement = document.querySelector("#test1");

// Change visibility using JavaScript
function toggleVisibility() {
  if (testElement.style.display === 'none') {
    testElement.style.display = 'block';
  } else {
    testElement.style.display = 'none';
  }
}

setTimeout(toggleVisibility, 5000);
</script>
4

Actually, I was already using that and had a problem introducing the delay. Here is a screenshot of the issue:

image
image861×380 19.5 KB

I would like to add a check to only show the group if it is still being hovered.

5

The way you’re trying to do it won’t work… (you can’t use a pause for this).

Here is an example of the correct way to do it with Native Bubble:

Hover Delay (bubbleapps.io)

2 Likes
6

Wasnt aware that I can schedule a custom event on frontend workflows. Thank you so much for pointing that out!

1 Like
7

Sorry to bother you more but could you point out my mistake in this code of why only the hiding works?

8

What are you referring to?

9

I found that it is not working using the getElementById() but it is working using querySelector().
One more issue I am facing is that it only works when I want to hide the element but not of it is hidden and I want to make it appear.

The code I am using is:

<script>
// Get the element
const testElement = document.querySelector("#test1");

// Change visibility using JavaScript
function toggleVisibility() {
  if (testElement.style.display === 'none') {
    testElement.style.display = 'block';
  } else {
    testElement.style.display = 'none';
  }
}

setTimeout(toggleVisibility, 5000);
</script>

I placed an element with the ID #test1 on the screen. When I set its visibility to yes it disappears. When I hide it and reload the page the element does not appear.

10

This topic was automatically closed after 70 days. New replies are no longer allowed.