Tooltips on configurable options

[Ragonz]

I've read through a few prior threads

but can't quite wrap my head around this, I'm trying to add a little bit of text onto a config option that when you hover over it you get an explanation (attached a screenshot)

does anyone know how to achieve this?

Edited September 15, 2020 by Ragonz

[brian!]

27 minutes ago, Ragonz said:

does anyone know how to achieve this?

it's doable in the template as it's just going to be a series of if statements...

alternatively, using a clientareapagecart hook to loop through the array and add the relevant html code to each optionname might work.... too late in the day to start coding it now, but I can't see any obvious reason why that wouldn't work.

[pRieStaKos]

WHMCS is using Bootstrap 3.x. Check the tooltip feature on bootstrap how to use it correctly.

[Ragonz]

Had numerous goes at this but simply cannot get it to work, I don't suppose anyone would be kind enough to point me in the right direction?

[brian!]

21 hours ago, Ragonz said:

Had numerous goes at this but simply cannot get it to work, I don't suppose anyone would be kind enough to point me in the right direction?

one way to do it would be in three parts - 1. cart action hook to get tooltip content for each applicable config option; 2. template changes to display any additional content (at some point i'll change this to use another hook to make these changes rather than editing the template); and then 3. using Language Overrides to trigger the tooltips...

so first the hook - i've modified a previous hook for this purpose, but it's still working in v8.1 (Six or 21) with standard_cart...

<?php

# Add Tooltips to Configurable Options Hook
# Written by brian!
 
function cart_config_options_tooltips_hook($vars)
{
	GLOBAL $_LANG;
	if ($vars['templatefile'] == 'configureproduct'){
		$configurableoptions = $vars['configurableoptions'];
		foreach ($configurableoptions as $key => $option) {
			$langstring = "configurableoptiontooltip".$option['id'];
			if (!empty($_LANG[$langstring]['text'])) {
				$configurableoptions[$key]['tooltiptext'] = $_LANG[$langstring]['text'];
				if (!empty($_LANG[$langstring]['placement'])) {
					$configurableoptions[$key]['tooltipplace'] = $_LANG[$langstring]['placement'];
				} else {
					$configurableoptions[$key]['tooltipplace'] = 'top';
				}
			}
		}
		return array("configurableoptions" => $configurableoptions);
	}
}
add_hook("ClientAreaPageCart", 1, "cart_config_options_tooltips_hook");

next the template changes... in the configureproduct.tpl template, there is a block of code within {if $configurableoptions} that contains four <label for> tags ro display the option name...

<label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>

we can add conditional Smarty code to add the bootstrap tooltip options for those enabled options...

<label for="inputConfigOption{$configoption.id}" {if $configoption.tooltiptext}data-toggle="tooltip" data-placement="{$configoption.tooltipplace}" title="{$configoption.tooltiptext}"{/if}>{$configoption.optionname}</label>

btw - in this example, i'm tool-tipping the config option name itself... if you were going to add a "what's this" type tooltip, then you would wrap the above if statement around that text...

and then the third step is the language overrides to trigger the output....

$_LANG['configurableoptiontooltip32']['placement'] = "right";
$_LANG['configurableoptiontooltip32']['text'] = "Choose the amount of memory that you think you will need.";
$_LANG['configurableoptiontooltip43']['text'] = "Public slots are the total number of spaces on a game server available to players.";
$_LANG['configurableoptiontooltip47']['text'] = "Standard Support replies will be within 2 years of opening the ticket!";

so the first thing to note is the numbers - 32, 43 and 47 - they will be the ID numbers for the configurable option and can be found in many ways - simplest probably being via the browser (inspect element etc)...

the hook in step 1 defines a default placement for the tooltip, e.g top - but if you feel that your default should be left, right or bottom, then you can define that in the hook.

however, you can set placement values for each configurable option tooltip individually and it will overrule the default value - so in the above example, #32 (Quantity GB) will be shown to the right of the label... the other two, because a placement value has not been specified, will default to being on top...

any configurable options that do not have tooltips activated by the language files will just behave as normal.

because we are using language overrides, you can decide which languages show the tooltips - e.g if I looked at the above page in French, but no equivalent French overrides had been added, then the hook would effectively do nothing and the page would display as normal with no tooltips....

of course, you can add English text to your non-English language overrides files if you wanted everyone to see the tooltips in English (or the hook could be tweaked to not pull the content from the overrides files but from a defined array instead) - whichever way I went with this, I will guarantee that there will be someone who will want to do it the other way!

btw - this is what it will look like on your site, using your Mumble product as an example...

I hope that helps to point you in the right direction! 🙂

Edited January 4, 2021 by brian!

[Ragonz]

Hi Brian

Thank you very much for that, I was expecting more of a check this place and this place and maybe some code, not for you to do the whole thing for me (but I'm certainly not complaining)

Real MVP over here you are 😄

I made a slight change to the configureproduct.tpl file

 

<div class="form-group"><i class="fas fa-info-circle"></i>
                                                    <label for="inputConfigOption{$configoption.id}" {if $configoption.tooltiptext}data-toggle="tooltip" data-placement="{$configoption.tooltipplace}" title="{$configoption.tooltiptext}"{/if}>{$configoption.optionname}</label>

 

Just adds a little info icon to prompt people to hover over the text

[Ragonz]

Hmm, is there a way to also display the tooltip over the icon as well?

[brian!]

10 hours ago, Ragonz said:

Hmm, is there a way to also display the tooltip over the icon as well?

as well or instead of ?

if instead of, e.g move the tooltip from the config option name to the icon..

<div class="form-group"><i class="fas fa-info-circle"></i>
	<label for="inputConfigOption{$configoption.id}" {if $configoption.tooltiptext}data-toggle="tooltip" data-placement="{$configoption.tooltipplace}" title="{$configoption.tooltiptext}"{/if}>{$configoption.optionname}</label>

becomes...

<div class="form-group">{if $configoption.tooltiptext} <i class="far fa-question-circle" data-toggle="tooltip" data-placement="{$configoption.tooltipplace}" title="{$configoption.tooltiptext}"></i>{/if}
	<label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>

if you want both icon and config option name to be tooltipped, then it's...

<div class="form-group">{if $configoption.tooltiptext} <i class="far fa-question-circle" data-toggle="tooltip" data-placement="{$configoption.tooltipplace}" title="{$configoption.tooltiptext}"></i>{/if}
	<label for="inputConfigOption{$configoption.id}" {if $configoption.tooltiptext}data-toggle="tooltip" data-placement="{$configoption.tooltipplace}" title="{$configoption.tooltiptext}"{/if}>{$configoption.optionname}</label>

btw - the advantage of wrapping the FA icon in the if statement is that it will only appear if that config option has a tooltip.... the way you had it previously, the icon would be added to all config options regardless of whether there was a tooltip or not.

[Ragonz]

as well

excellent as always Brian 👍