Canvas Support

Tooltips hover but not stick

9 replies · opened Dec 23, 2017

Pphlee_1Dec 23, 2017

Hi there,

I've tried using the tooltips on buttons and I like the behaviour on hover but I would like to not have them stick when the button is clicked.Is this possible?
Ie. we want the tooltip to only show up on mouseover but not whhen the button is clicked.

Best
ph

SSemicolon WebSTAFFDec 23, 2017

Hello,

This is Definitely Possible! Simply find the following code in the js/functions.js File: 

$('[data-toggle="tooltip"]').tooltip({container: 'body'});

and replace it with:

$('[data-toggle="tooltip"]').tooltip({container: 'body', trigger: 'hover'});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Pphlee_1Dec 23, 2017

Great, thank you for this!
ph

Pphlee_1Dec 24, 2017

Hi again,

You gave me some code (for function.js) to make the tooltips only work on 'hover' but not on click.
I've implemented the code and it works fine in firefox, however, in chrome the behaviour has not changed.
Do you have any tips for this issue?

Thanks
ph

SSemicolon WebSTAFFDec 24, 2017

Hello,

This should work fine in all the Browsers. Can you please Refresh your Browser Cache: Ctrl/Shift + F5 (Reload) and check this again. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Pphlee_1Dec 27, 2017

Hi again, yes, browser refresh and everything has been done, but the tooltip does not disappear in chrome.

What I'd like to happen:

  1. During the hover over the button the tooltip appears (works in FF and Chrome)
  2. Tooltip should disappear after click on the button (works in FF, but not in Chrome)

I think this has to do with the fact that the button is disabled when clicked; it seems that once the button is disabled the mouseout event does not register properly anymore in Chrome; do you have a solution for this?
I've tried to add some javascript that removes the cursor from the hover state before the button is disabled, but no luck so far.

SSemicolon WebSTAFFDec 28, 2017

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Pphlee_1Dec 28, 2017

Hi there,

OK, we can try to open this for you.
You need to log into our staging server (it's pretty slow, but it should work):
http://www.mesh-test.com:8016/en/login.php

Log in w/ the following account:
username: support@semicolonweb.com
password: 1q2w3e4R

When you're logged in, type a drug name into the textfield at the top of the page (where it says "find leaflets"), for example start typing "tylenol" or "aspirin". You will see the drug appear under the text field with 8 buttons, each button represents a language.

When you mouseover each button you will see the hover effect showing the name of the language (works well in FF and Chrome); when you click on one of the buttons you will see that the tooltip does not disappear in Chrome.

Best
ph

SSemicolon WebSTAFFDec 28, 2017

Hello,

We have checked out your Page and suspect the issue is due to AJAX after adding the Item in the Sidebar. You will need to use the Callback to disable the Tooltip properly. Consider using the following code in the AJAX Callback: 

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

This should fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Pphlee_1Dec 28, 2017

This works, thanks!
ph

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard