Hello!
I have been searching for a guide to help with implementing a tooltip on each of my product swatches, however I had no luck finding such guide. Was hoping somebody could look at my current code and help get me to my end goal. I am using the Brooklyn theme and I'm currently trying to use html/scss to create the tooltips but the trouble I'm running into is that it negates the color swatches I have implemented, and I cannot figure out how to include the title of the color in the tooltip.
Here is exactly what is currently happening:
Here is my current code where I'm attempting to implement it:
{% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="radio-wrapper js product-form__item">
<label class="single-option-radio__label"
for="ProductSelect-option-{{ forloop.index0 }}">
{{ option.name | escape }}
</label>
{% if section.settings.product_selector == 'radio' %}
<fieldset class="single-option-radio"
id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="option{{ option.position }}"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<a class="tooltips" href="#"><label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
<span>{{ variant.title }}</span></a>
{% endfor %}
</fieldset>
{% else %}
<select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
{% endfor %}
</select>
{% endif %}
</div>
{% endfor %}
{% endunless %}And here is my color swatches that won't show up afterwards:
$colors: (
'color-Athletic\ Heather' #a8abb2,
'color-Heather\ Blue' #86A9C9,
'color-Heather\ Dust' #e0cbb7,
'color-Heather\ Orchid' #b17e85,
'color-Heather\ Prism\ Dusty\ Blue' #a1c3b8,
'color-Heather\ Prism\ Ice\ Blue' #c0e3e4,
'color-Heather\ Prism\ Peach' #eec1b3,
'color-White' #E2E3DE,
'color-Mauve' #BF6E6E,
'color-Soft\ Cream' #D3C4AD,
'color-Pink' #FCD1DB,
'color-Sport\ Grey' #9b969c,
'color-Light\ Blue' #a1c5e1,
'color-Light\ Pink' #ffc0cc,
'color-Heather\ Prism\ Lilac' #d9b0cb
);
@each $color in $colors {
$colorName: nth($color, 1);
$bgColor: nth($color, 2);
#ProductSelect-option-#{$colorName} + label {
background-color: $bgColor;
color: $bgColor;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 25px;
margin: 5px;
text-indent: 100%;
white-space: nowrap;
}
#ProductSelect-option-#{$colorName}:checked + label {
border-color: #555;
border-width: 3px;
}
}
a.tooltips {
position: relative;
display: inline;
span {
position: absolute;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
&:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
}
}
a {
&:hover.tooltips {
span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
}
}Any help or guidance is greatly appreciated!
For anyone wondering in the future I found and implemented a solution shortly after my post. It is somewhat similar. I simply use a Tooltip CSS generator to generate an appropriate tooltip code (it gives you html and scss (css is default but you can change that to scss)). I use the one here and here.
In the end I got this SCCS code which I put into my theme.scss.liquid asset folder:
// 1st tooltip (vzorky)a.tooltips {position: relative;display: inline;span {position: absolute;width: 200px;color: #ffffff;background: #000000;height: 90px;line-height: 26px;padding: 7px;font-size: 15px;text-align: center;visibility: hidden;border-radius: 6px;&:after {content: '';position: absolute;top: 100%;left: 50%;margin-left: -0px;width: 0;height: 0;border-top: 8px solid #000000;border-right: 8px solid transparent;border-left: 8px solid transparent;}}}a {&:hover.tooltips {span {visibility: visible;opacity: 1;bottom: 30px;left: 0%;margin-left: -76px;z-index: 999;}}}
<a class="tooltips">Symbol(s) that show tooltip on hover<span>Tooltip text</span></a>
The result looks like this.
I cannot for the life of me figure this out haha. I put this code in at the bottom of my styles.css (in assets). I have the avenue theme.
I'm a newb to CSS. Can this only work when you hover over a link? What if I wanted a little tooltip to be to the side of a product option?
