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!
@jfishman I have no clue but I'm looking for the solution as well. I did find one by @oscprofessional in another thread here, but can't implement it in the right way.
Have you found a way to do this? If so please share..
Best,
Tom
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.
User | Count |
---|---|
734 | |
142 | |
104 | |
64 | |
37 |