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中似乎存在语法错误，并且类选择器仍然存在一些问题。试试这个：

    $(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变量，这是您需要设置为span ID才能为每个选项指定消息的内容。

希望这会有所帮助！

适用于Bigcommerce模具的qtip工具提示

1 个答案: