Hopscotch product tours Popup Only Once Per User and not shown after page reload is it possible?

The easiest way to do this is to use a cookie

before loading hopscotch check if the cookie exists - if it does not then proceed with initialising it and set the cookie.
If the cookie is found then simply ignore the init

Consider this code adapted from MDN

if (document.cookie.replace(/(?:(?:^|.*;\s*)showHopScotch\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    // Do HopScotch init here
    init();
    document.cookie = "showHopScotch=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}

Select allOpen in new window

Thanks for you comments

i am the beginner of jquery i try to this code but after page reload callout popup is showing again.

Please post code.

Hi sir

In first i provided code and attached hopscotch.js also. please check below code

/* globals hopscotch: false */

/* ============ */
/* EXAMPLE TOUR */
/* ============ */



var tour = {
  id: 'hello-hopscotch',
  steps: [
    {
      target: 'MiddleContent_btndocuments',
      title: 'Welcome to Hopscotch!',
      content: 'Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let\'s just take some time to see how Hopscotch actually works.',
      placement: 'bottom',
      arrowOffset: 60
    },
    {
      target:'Downloads',
      title: 'Where to begin',
      content: 'At the very least, you\'ll need to include these two files in your project to get started.',
      placement: 'right',
      yOffset: -20
    },
    {
      target: 'list-lenders',
      placement: 'bottom',
      title: 'Define and start your tour',
      content: 'Once you have Hopscotch on your page, you\'re ready to start making your tour! The biggest part of your tour definition will probably be the tour steps.'
    },
    {
      target: 'support',
      placement: 'bottom',
      title: 'Starting your tour',
      content: 'After you\'ve created your tour, pass it in to the startTour() method to start it.',
    },
    {
      target: 'login',
      placement: 'bottom',
      title: 'Basic step options',
      content: 'These are the most basic step options: <b>target</b>, <b>title</b>, <b>content</b>, and <b>placement</b>. For some steps, they may be all you need.',
    },
    {
      target: 'index',
      placement: 'bottom',
      title: 'Hopscotch API methods',
      content: 'Control your tour programmatically using these methods.',
    }
  ],
  showPrevButton: true,
  scrollTopMargin: 100
},

/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function(el, fn) {
  if (el.addEventListener) {
    el.addEventListener('click', fn, false);
  }
  else {
    el.attachEvent('onclick', fn);
  }
},

init = function() {
  var startBtnId = 'startTourBtn',
      calloutId = 'startTourCallout',
      mgr = hopscotch.getCalloutManager(),
      state = hopscotch.getState();

  if (state && state.indexOf('hello-hopscotch:') === 0) {
    // Already started the tour at some point!
    hopscotch.startTour(tour);
  }
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
      mgr.createCallout({
        id: calloutId,
        target: startBtnId,
        placement: 'left',
        title: 'Take an example tour',
        content: 'Start by taking an example tour to see Hopscotch in action!',
        yOffset: -20,
        arrowOffset: 20,
        width: 240
      });
    }, 100);
  }

  addClickListener(document.getElementById(startBtnId), function() {
    if (!hopscotch.isActive) {
      mgr.removeAllCallouts();
      hopscotch.startTour(tour);
    }

  });
 
  Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});  

};
if (document.cookie.replace(/(?:(?:^|.*;\s*)showHopScotch\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    // Do HopScotch init here
    init();
    document.cookie = "showHopScotch=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}