Bigcommerce Stencil 的 qtip 工具提示

Question

我正在尝试在我的 bigcommerce 基石主题中创建此工具提示。

我已完成所有步骤。但是图片本身并没有出现在我的网站上。

显示在我的内容中

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

我用

`<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>`

这是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>

这是我的 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>

为什么它不起作用？

Answer 1

看起来你的 js 中有一些语法错误，class 选择器仍然存在一些问题。试试这个：

    $(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;
  }

  });

我能够使用上面的代码和您提到的教程来完成这项工作，但有几点可能会有所帮助：

您使用的 qtip 插件版本 (1.0.0) 已弃用，并且与 jQuery 1.9x 及更高版本不兼容。我不得不使用 jQuery 1.6x 来避免 $.browser 的错误。参见：http://qtip2.com/guides
确保您按以下顺序引用脚本：
1. jQuery图书馆
2. qtip 插件
3. tooltip.js

控制台日志语句将在遍历每个选项时打印 slug 变量，这是您需要设置为跨度 ID 以指定每个选项的消息的内容。

希望对您有所帮助！

Bigcommerce Stencil 的 qtip 工具提示

qtip tooltip for Bigcommerce Stencil

jquery

tooltip

qtip

jquery-ui-tooltip

bigcommerce