Hide tooltip if no content is found

Question

I need to hide my tooltip if there is no content is found. Trying ways to make it work, but seems to no avail. I am using the older version of the qtip which is jquery.qtip-1.0.0-rc3.js. I tried using

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

it worked. It showed only the images of the tooltip with content but When I hover,there was no popup. Below is my full tooltip code. Please help me. What am i missing here?

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

When you add the $(this).remove() you need to avoid executing qtip. Try adding a return after you've removed the element:

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

This is the whole example:

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

Answer 2

That should be working, but I notice that when I run this in the console for your site, it's returning Uncaught TypeError: Cannot read property 'jquery' of null

Since you're using an older version of the qtip plugin, it looks like you're running into this:

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

Calling remove on the html variable is essentially passing null content into the .qtip function. I'd recommend trying the fix suggested in that GitHub issue or using a newer version of the qtip plugin.