Add tool tip to button in header

[rocketzeal]

Hi, I’m using the xtheme and I would like to add a tooltip to some buttons. See www.boddlelearning.com/support/online-instructions

On the bottom, there are three icons/buttons that I’d like to add tooltips for. How should I go about doing that?

[friech]

Hi Edcoda,

Thank you for writing in, regretfully, the button element has no tooltip feature.

You can use a combination of Icon Shortcode and Tooltip Shortcode instead.

e.g.

[extra href="#example" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." ]
[x_icon type="facebook-square"]
[/extra]

Have a nice weekend,
Cheers!

[rocketzeal]

Hi Friech, thanks so much for responding so promptly, where would I normally be pasting this code?

[christian]

Hey @rocketzeal,

Sorry for the confusion. The shortcode given by @friech is not a link. Though you can make it a link, it would require additional markup which I don’t recommend.

You need to use a Classic Button Shortcode instead which has an integrated Popover or Tooltip option and it can display an icon only.

You will need to replace your buttons with a Content Area element and insert the shortcode. Regretfully, it’s a trade off. You will lose your hover effect to have a tooltip.

I just discovered a little issue with the icon_only option. It currently does not work in shortcode mode but it can be fixed by adding this code in Theme Options > CSS.

.x-btn-icon-only .x-icon {
    margin: 0;
}

Thanks.

[rocketzeal]

@friech

[extra href="#example" title=“Yeah, tooltip time!” info=“popover” info_place=“top” info_trigger=“hover” info_content=“Place a little extra content in here for informational purposes.” ]
[x_icon type=“facebook-square”]
[/extra]

Ah, got it. Thanks!

[ruenel]

You are most welcome!