Help With Tooltip Implementation

[jfishman]

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!