bootstrap-tour icon indicating copy to clipboard operation
bootstrap-tour copied to clipboard

How to implement tour via npm module in react?

Open stanislav-grin opened this issue 6 years ago • 3 comments

Hi, I have a problem during implementation of tour in react app. I've installed tour with npm module, then imported it in module:

import Tour from 'bootstrap-tour'

and in componentDidMount make test use case:

const tour = new Tour({
      steps: [
        {
          element  : '#myId',
          title    : 'Test Navigator',
          content  : 'Content of my step'
        }
      ]
    })

    tour.init()

    tour.start()

The id is valid for this test, but I don't see popup with text, but instead I see next error in console:

bootstrap-tour.js:586 Uncaught TypeError: $element.popover is not a function

What have I missed? Maybe I need some other dependencies to get it work properly?

stanislav-grin avatar Jan 04 '19 08:01 stanislav-grin

@stanislav-grin Where you able to get it to run smoothly in react?

MovingGifts avatar Jun 27 '19 21:06 MovingGifts

@MovingGifts Unfortunately no. I moved to another library and it fit perfectly. https://github.com/gilbarbara/react-joyride

stanislav-grin avatar Jul 03 '19 12:07 stanislav-grin

Hey fellows, import jQuery in Root.jsx or relevant file

import $ from 'jquery';
window.jQuery = $;

and then import standalone version import BootstrapTour from "bootstrap-tour/build/js/bootstrap-tour-standalone.min"

emreyildiz0 avatar Jun 08 '21 07:06 emreyildiz0