How to add content beside a dropdown

When the users view a particular product, there are 2 dropdown (select) boxes
that allow them to specify the color and size wanted:

Please Select Color

Please Select Size

I want to add a 'Help me determine the right size' link out to the right side
of the "Please Select Size" dropdown box so that when the link is clicked on
it will open up a small window of content, or maybe something like a tooltip.

Here is the code for that particular dropdown:

<select 
	id="hikashop_product_characteristic_10" 
	name="hikashop_product_characteristic[10]" 
	class="inputbox" 
	size="1" 
	onchange="return hikashopUpdateVariant(this);">
	
	<option value="38" selected="selected">Please Select Size</option>
	<option value="21">5</option>
	<option value="22">6</option>
	<option value="3">7</option>
	<option value="4">8</option>
	<option value="5">9</option>
	<option value="6">10</option>
	<option value="7">11</option>
</select>

Hi,

I think that the easiest way is to edit the view "product / show_block_characteristic" in HikaShop > Display > Views.
And replace the content by:

<?php
JHTML::_('behavior.tooltip');
if (!empty ($this->element->characteristics)) {
?><div id="hikashop_product_characteristics" class="hikashop_product_characteristics"><?php
	echo $this->characteristic->displayFE($this->element, $this->params);
	if($this->element->characteristics[10]){
		echo "<span style='position:relative;top:-18px; left: 100px;'>";
		echo JHTML::tooltip('This is the tooltip text', 'Tooltip title', 'tooltip.png', '', 'http://www.joomla.org');
		echo "</span>";
	}
?></div><?php
}
?>

Hello Xavier,

Thanks for the help!

Here is the code for "product / show_block_characteristic" now:

<?php
JHTML::_('behavior.tooltip');
if (!empty ($this->element->characteristics)) {
?><div id="hikashop_product_characteristics" class="hikashop_product_characteristics"><?php
  echo $this->characteristic->displayFE($this->element, $this->params);
  if ($this->element->characteristics[10]) {
    echo "<span style='position:relative; top:-18px; left:145px;'>";    
    echo JHTML::tooltip(
        'This is the tooltip text',
        'Tooltip title',
        'tooltip.png',
        '',
        'http://www.joomla.org'
    );    
    echo "</span>";
  }
?></div><?php
}
?>

Sure, here's a link you can use...

[link removed since it no longer applies to topic]

Hi,

I think that the problem come from you template.
Try to change the template to see if the tooltip appear, or search in the base.css or custom.css files of your template if there is not a property which hide the tooltip.

You are right...

When I changed to a different template, the tooltip displayed properly.

It is not working with my current template.

The template that I'm using has over a dozen CSS files.
I went through each one (searching for the word 'tip'),
but I never found any mention of tooltip or tip in any
of those .css files.

If any of those files were 'hiding' the tooltip, I would
have been able to find the word 'tip' in one of them, right?

Maybe I can just add some default CSS to handle the tooltip
somewhere. What do you think?

Yes, you can try to add default CSS on the class .hasTip{}.

Or contact your template provider. I think you can too find a solution on google, because some people should have the same issue.