IntroJs Hints if parent not Visible

Question

IntroJs hints How can I skip or hide when a parent element is not visible? For some reason only inline seems to be working for my hints.I have the data-hints in spans on the HTML and I need to check if the nearest element is visible or parent/child element.

var hints = false;

var all = document.getElementsByTagName("*");

function introFunction() {

for (var i = 0, max = all.length; i < max; i++) {
    if ((isHidden(all[i]) && hints));
    document.getElementById("#helpFunc").html("Show Help");
    introJs().hideHints();
} else {
    document.getElementById("#helpFunc").html("Hide Help");
    introJs().showHints();
}
hints = !hints;

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return ((style.display === 'none') || (style.visibility === 'hidden'));
}

}

score 0 · Answer 1 · answered Dec 06 '21 at 23:05

Instead of trying to get the computed style of the element, try checking the element bounding rectangles - if there aren't any, it means the element is not visible.

!!el.getClientRects().length; // false means el or its parent(s) is hidden

LE: that doesn't work for "visibility: hidden;" though. So maybe you can combine the above with what you already have.

IntroJs Hints if parent not Visible

1 Answers1