Help With Tooltip Implementation

New Member
2 0 0

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:

 

Screen Shot 2019-10-24 at 7.55.16 PM.png

 

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!

 

 

 

0 Likes
Explorer
48 0 9

@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

0 Likes
Explorer
48 0 9

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;
}
}
}
The text after // is the title of the tooltip, since it turns out I have to generate and adjust new tooltip scss code for a different tooltip (it's text dependent, since the tooltip does not behave dynamically based on the text it contains). You need to adjust values like width, height, and others in the first part of the code. 
 
That's all that I have to add to my code, after that I just use the following html code in the products description html section or elsewhere:
<a class="tooltips">Symbol(s) that show tooltip on hover<span>Tooltip text</span></a>

The result looks like this.

Screen Shot 2020-04-29 at 11.06.42.png

Tourist
4 0 2

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? 

 

Screen Shot 2020-11-25 at 12.47.55 AM.png

0 Likes