Rapicart Pro 'options' tool tip

Classic Plugins
1

Hi

When using the ‘Options’ feature of Rapidcart Pro you get the attached popup which the customer can select from the available options that apply to that product, before proceeding to the cart and completing the order.

RCP-Panel
RCP-Panel601×658 36.9 KB

I’d like to add a tooltip to one, or more, of these options. In this case it would be to provide more info on the ‘Annual Sanitisation’ option shown.

There doesn’t appear to be a ‘built in’ tool tip facility to do this in RCP, and because this is part of the RCP plugin I can’t just drop one of the Tool Tip stacks into it.

Appreciate any advice on if/how this could be possible.

Many thanks

Regards

Mark

2

I wonder if html would render. You could try something like this:
<abbr title="Description of option would go here">Annual Sanitisation</abbr>
And it should render like this: Annual Sanitisation

Not all that ‘pretty’ but it might work…

1 Like
3

Thanks Jabo

It kind of renders, I get a floating ? - but don’t get the 'Description of option…" popping up in a nice tool tip.

I’ve tried to take a screen shot

untitled
untitled596×641 36.6 KB

But it isn’t easy to capture, I’ll try and post a demo page a little later when I have a bit more time.

Regards

Mark

4

I’ve got this working to an extent on a test site here

If you click View Product and then Add to Cart you’ll see the tooltip triggers when hovering over the ‘Choose a Colour’ title on the left.

I’ve used this Bootstrap code (I’m using ThemeFlood Boutique theme which is built on Bootstrap) in the RCP options panel:

<a href="#" data-toggle="tooltip" title="All you have to do is choose a colour!!">Choose a Colour</a>

Ideally I’d like to be able to trigger this from a Font Awesome icon, so any help with getting this to work reliably would be great.

Also happy to hear any other suggestions on how best to do this.

Many thanks

Mark

5

I think this would add the FA icon in, but it wouldn’t trigger it, just add it to the ‘hoverable’ part.

<a href="#" data-toggle="tooltip" title="All you have to do is choose a colour!!"><i class="fa fa-paint-brush"></i>Choose a Colour</a>

6

Thanks, that’s got me on the way to something I can use. I’ve made it so it is just the fa icon that triggers the tip on hover and added a bit on in line styling to it.

Thanks again

Regards

Mark

1 Like
7

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.