Search code examples
jquerytooltipbigcommerceqtipjquery-ui-tooltip

qtip tooltip for Bigcommerce Stencil

I am trying to create this tooltip in my bigcommerce cornerstone theme.

I have followed all the steps. But the image itself does not appear on my site.

It is displayed in my content 

<span id="service-time" style="display: none;">[INFO TO BE SHOWN WITH THE TOOLTIP]</span>

I use 

`<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>`

`<script type="text/javascript" src="/content/jquery.qtip-1.0.0-rc3.js"></script>`

This is the tooltips.js 

<script>
    $(document).ready(function() {

  $("div[data-product-option-change] .form-field").each(function() {

 var optionLabel = $(this).sibling('.form-label small');

    var optionLabelText = optionLabel.children("label.form-label.form-label--alternate.form-label--inlineSmall").children(".form-label").text();
    // check that optionLabelText is not an empty string
    if ($("img", this).length < 1 && slugify(optionLabelText).trim().length) {
      $(this).sibling('.form-label small')
        .children("label.form-label.form-label--alternate.form-label--inlineSmall")
        .children(".form-label")
        .append("&nbsp;<div class='help_div' style='display: inline;'><img src='/content/help.gif'  alt='" + optionLabelText + "'/></div>");
    }
}
  });

  $('.help_div').each(function() {

    var slug = slugify($("img", this).prop('alt'));
    var html = $("#" + slug).html();
    var titleq = $("img", this).prop('alt').replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
    titleq = "<strong style='font-size: 12px'>" + titleq + "</strong><br/>"
    if (!html) html = "Description not available yet."

    $(this).qtip({
      content: titleq + html,
      position: {
        corner: {
          tooltip: 'topRight',
          target: 'bottomLeft'
        }
      },
      style: {
        tip: {
          corner: 'rightTop',
          color: '#6699CC',
          size: {
            x: 15,
            y: 9
          }
        },
        background: '#6699CC',
        color: '#FFFFFF',
        border: {
          color: '#6699CC',
        }
      }
    });

  });

  function slugify(text) {
    text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
    text = text.replace(/-/gi, "_");
    text = text.replace(/^\s+|\s+$/g, "");
    text = text.replace(/\s/gi, "-");
    text = text.toLowerCase();
    return text;
  }

});
</script>

This is my HTML:

<div data-product-option-change="" style="">
<div class="form-field" data-product-attribute="set-select">
    <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_250">
        Service Time:

            <small>Required</small><span class="toolTip" title=""></span>
    </label>


</div>



<div class="form-field" data-product-attribute="input-text">
    <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_252">
        Event Name:

            <small>Required</small><span class="toolTip" title=""></span>
    </label>


</div>
</div>

<span id="service-time" style="display: none;">[INFO TO BE SHOWN WITH THE TOOLTIP]</span>

why isn't it working?

Solution

  • It looks like there are some syntax errors in your js, and some issues still with the class selectors. Try this:

        $(document).ready(function() {

$(".form-field").each(function() {

var optionLabel = $(this).children('.form-label');
var optionLabelText = optionLabel.text();


if($("img", this).length < 1) {
$(this).children('.form-label.form-label--alternate.form-label--inlineSmall').append("&nbsp;<div class='help_div' style='float:right;'><img src='/content/help.gif'  alt='"+optionLabelText+"'/></div>");
}

});


  $('.help_div').each(function() {

    var slug = slugify($("img", this).prop('alt'));
    console.log(slug);
    var html = $("#" + slug).html();
    var titleq = $("img", this).prop('alt').replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
    titleq = "<strong style='font-size: 12px'>" + titleq + "</strong><br/>"
    if (!html) html = "Description not available yet."

    $(this).qtip({
      content: titleq + html,
      position: {
        corner: {
          tooltip: 'topRight',
          target: 'bottomLeft'
        }
      },
      style: {
        tip: {
          corner: 'rightTop',
          color: '#6699CC',
          size: {
            x: 15,
            y: 9
          }
        },
        background: '#6699CC',
        color: '#FFFFFF',
        border: {
          color: '#6699CC',
        }
      }
    });

  });

  function slugify(text) {
    text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
    text = text.replace(/-/gi, "_");
    text = text.replace(/^\s+|\s+$/g, "");
    text = text.replace(/\s/gi, "-");
    text = text.toLowerCase();
    return text;
  }

  });

    I was able to get this working using the code above and the tutorial you mentioned, but a couple of notes that might help:

    • The version of the qtip plugin you're using (1.0.0) is deprecated, and it's not compatible with jQuery 1.9x and above. I had to use jQuery 1.6x to avoid errors from $.browser. See: http://qtip2.com/guides
    • Make sure you're referencing your scripts in this order:
      1. jQuery library
      2. qtip plugin
      3. tooltip.js

    The console log statement will print the slug variable as it loops through each option, which is what you need to set as the span ID to specify the message for each option.

    Hope this helps!