如果未找到内容，则隐藏工具提示

Question

如果找不到内容，我需要隐藏工具提示。想办法让它发挥作用，但似乎无济于事。我正在使用旧版本的 qtip，即 jquery.qtip-1.0.0-rc3.js。我尝试使用

if (!html) {
    $(this).remove();
}

它起作用了。它只显示带有内容的工具提示的图像，但是当我悬停时，没有弹出窗口。下面是我的完整工具提示代码。请帮我。我在这里错过了什么？

$(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.png'  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: 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;
    }

});

Answer 1

应该工作，但我注意到当我运行在您网站的控制台中执行此操作时，它返回 Uncaught TypeError: Cannot read property 'jquery' of null

由于您使用的是旧版本的 qtip 插件，因此您运行似乎正在使用：

https://github.com/qTip2/qTip2/issues/275

在 html 变量上调用 remove 实际上是将空内容传递给 .qtip 函数。我建议尝试解决 GitHub 问题中建议的修复或使用更新版本的 qtip 插件。

Answer 2

添加$(this).remove()时需要避免执行qtip。删除元素后尝试添加 return：

if (!html) {
    $(this).remove();
    return;
}

这是整个示例：

$(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.png'  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) {
      $(this).remove();
      return;
    }

    $(this).qtip({
      content: 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;
  }
});

如果未找到内容，则隐藏工具提示

Hide tooltip if no content is found

html

javascript

tooltip

qtip

bigcommerce