intro.js показать и скрыть данные-подсказки

Question

Я хочу иметь кнопку, которая может включать и выключать функцию «подсказки» в intro.js.

У меня есть рабочая версия для показа, а затем скрыть, но показ работает только один раз. Как я могу заставить его работать многократно? Эта функциональность работает для стандартного ввода данных, но не для подсказки данных.

<div class="jumbotron"> 
    <h1 id='step1'>Hints</h1> 
    <p class="lead">Adding hints using JSON + callbacks</p> 
    <a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a> 
</div> 

function addHints(){ 
    intro = introJs(); 
     intro.setOptions({ 
     hints: [ 
      { 
      element: document.querySelector('#step1'), 
      hint: "This is a tooltip.", 
      hintPosition: 'top-middle' 
      }, 
      { 
      element: '#step2', 
      hint: 'More features, more fun.', 
      position: 'left' 
      }, 
      { 
      element: '#step4', 
      hint: "<b>Another</b> step.", 
      hintPosition: 'top-middle' 
      } 
     ] 
     }); 
     intro.onhintsadded(function() { 
      console.log('all hints added'); 
     }); 
     intro.onhintclick(function(hintElement, item, stepId) { 
      console.log('hint clicked', hintElement, item, stepId); 
     }); 
     intro.onhintclose(function (stepId) { 
      console.log('hint closed', stepId); 
     }); 
     intro.addHints(); 
    } 
$(function() { 
    $('#step2').click(function(){ 
     if ($('#step2').hasClass('clicked')) { 
      introJs().hideHints(); 
      $('#step2').removeClass('clicked'); 
     } else { 
      addHints(); 
      $('#step2').addClass('clicked'); 
     } 
    }); 
}); 

Answer 1

Возможно немного Hacky, но это работает для меня ...

Во-первых, поставить свои намеки в их собственной переменной:

hints = [{...}, ...] 

затем сбросьте подсказки в настройках интро

intro.onhintclose(function(stepId) { 
    if (document.querySelectorAll('.introjs-hidehint').length === hints.length) { 
    intro.setOptions({hints: hints}) 
    } 
}) 

скрытом намеков приведены класс introjs-hidehint и document.querySelectorAll вернется все они в массиве. Когда этот массив будет иметь тот же размер, что и ваш массив подсказок, сбросьте подсказки в своих вариантах ввода, и это приведет к сбросу всех ваших намеков, чтобы вы могли показать их снова.

Answer 2

Вместо использования hideHints intro.js метод API просто удалить Div блок intro.js из DOM:

var introDiv = document.getElementsByClassName("introjs-hints")[0]; 
introDiv.parentNode.removeChild(introDiv); 

(Вы можете сделать то же самое с JQuery, если вы хотите).

Когда div удаляется из DOM, просто инициализируйте подсказки еще раз, как это делается с вашим методом addHints, когда вы хотите показать подсказки, и это сработает.