Tool Tips on Buttons and Remove Links

[cdelagarza]

Hi there,

first thing, I want to add your regular tooltip feature to buttons. How can I achieve that? Currently I use this code for tool tips in some body copy elements (text) but how to use this on buttons?

Blockquote [extra href="#drei" info=“popover” info_place=“top” info_trigger=“hover” info_content=“je nach Forschungsthema variabel” ] drei Jahren [/extra]

Second thing, I want to remove the href links (#…) completely, if you click on the text you get the hashtag and text in the url which is not necessary. I just want to use the tooltip feature, without links and without the ‘bump’ to the top of the page.

Another question about hashtags, when anchors are set on the same page those anchor hashtags appear in the URL at the top. Is there an easy way to use the anchors without them showing in the address bar?

Best,
Christopher

[friech]

Hi Christopher,

Thank you for writing in, you can write the tooltip shortcode like this.

[extra href="javascript:void(0)" title="Yeah, tooltip time!" info="tooltip" info_place="top" info_trigger="hover"]<div class="x-btn">Place your content here </div>[/extra]

You can add your own class on this part <div class="x-btn">Place your content here </div> so you can style it as you like.

Cheers!

[cdelagarza]

Thanks, that helped so far.

If you take a look at this page (sub-navigation): https://movmi.net/about/

Who we are > movmi’s Values > Our Team

you can see anchor-links if you hover on the elements, for example:

• https://movmi.net/about/#who-we-are
• https://movmi.net/about/#values
• https://movmi.net/about/#our-team

When you click on the sub-navigation, the main address remains always https://movmi.net/about/
(without #who-we-are / #values / #our-team)

How can I achieve that which X PRO?

[tristup]

Hi Christopher,

What you are expecting is already added as a feature request, so it might be taken into account in the future. I would also suggest you go through the following article which may help you with this.

Remove #Hash from url without refreshing.

How to remove hash from window.location with JavaScript without page refresh ?...

Thanks

[cdelagarza]

Why is such easy thing still so complicated?

As Designer I don’t want to learn JavaScript.
Just a simple code to add it and then use it.

What about this?

window.location.href.substr(0, window.location.href.indexOf('#'))

or

window.location.href.split('#')[0]

But thanks for your fast reply.

[alexander]

Hi @cdelagarza,

I’m sorry, there really aren’t many good ways to customize those tooltips. They were designed to work in a very specific way, and can’t easily be customized. It will take some custom javascript to accomplish what you’re looking for. The code you mentioned looks like a good start. preventDefault is the key to avoiding the URL from changing when you click an element. We can’t offer custom code with our support, but we do answer any customization questions with a One subscription.