Bootstrap 4

[aeksco]

Are there any plans to make this project Bootstrap 4 compliant? I think the following changes would move this in the right direction:

• Migrate LESS to SCSS
  • Leverage $border-radius and $enable-rounded variables for .tour-step-background CSS
  • Use rem in favor of px
  • Replace btn-default with btn-secondary
• Ensure compatibility with Bootstrap 4 Popovers
  • Replace .popover('destroy') with .popover('dispose')
  • Replace <div class='arrow'></div> with <div class='popover-arrow'></div> in popover template definition
• AMD / CommonJS / Browserify Support (var tour = require('boostrap-tour);)

I'm currently using BS4 and I've only been able to get tours to work when I include the standalone files - this results in some CSS conflicts and inconsistent popover placement and behavior.

If we could create a milestone to make this project compatible with Bootstrap 4 I would be happy to contribute to reaching those goals - I've working on a large project that would benefit tremendously from a consistent tour experience and at the moment there isn't an open-source alternative that's as well supported and maintained as bootstrap-tour.

Edits: elaborated on required changes for BS4 compatibility

[sorich87]

@aeksco of course, we want to make this project Bootstrap 4 compliant.

Are these the only changes needed for compatibility?

[sorich87]

It looks like rem question is not settled yet twbs/bootstrap#19943.

[aeksco]

@sorich87 As far as I can tell those are the only changes required for Bootstrap 4 compliance. I've got a feature branch working with the aforementioned changes - I'll have some time this afternoon to push to my remote. Once that's in place we can discuss how we want to manage these breaking changes - a bootstrap-4 branch would be a good place to isolate this development. I'll post an update once my changes are pushed.

[sorich87]

Ok. Thanks!

I think we can make these changes backward compatible:

• Migration from LESS to SCSS / Leverage $border-radius and $enable-rounded variables for .tour-step-background CSS
  People currently importing the LESS file can simply import the future generated CSS file without making any change to their build process.
• Using rem in favor of px
  Let's wait for Why has Bootstrap 4 changed to using rem? twbs/bootstrap#19943 to be settled so that we don't have to revert later.
• Replacing btn-default with btn-secondary, .popover('destroy') with .popover('dispose'), <div class='arrow'></div> with <div class='popover-arrow'></div>
  We can support both. E.g. <div class='arrow popover-arrow'></div>.
• AMD / CommonJS / Browserify Support
  Done today 57ee748

[kfugger]

Happy to hear that you are working on Bootstrap 4 compatibility! I have also experienced issues related to modal/popover misplacement and inability to exit the tour. Will you push these changes to a new branch?

[julkue]

@sorich87 In the meantime you should point out the required Bootstrap version in the "dependencies" documentation.

[julkue]

"Compatible with Bootstrap >= 2.3.0" is wrong! It must be ">= 2.3.0 < 4"

[occasl]

Any update on this? I'd love to use this feature in bootstrap 4.

[aeksco]

Bootstrap 4 beta was just released - so we're likely going to see fewer breaking changes that we did with the alpha releases. I'm going to continue my work on this issue - I'll post an update here as things take shape!

[azyzio]

Found a change that is necessary for the tour to work properly Popovers are now using:
.popover-header instead of .popover-title
.popover-body instead of .popover-content
Should be updated in the template

[sorich87]

The latest version in master should be compatible with Bootstrap, except for the orphan option.

[azyzio]

Hey Ulrich, is there any progress on enabling orphan option?

[marclaporte]

Some work has happened here: #643

[mikesutton]

I think this is a CSS issue, I played around with it and in the end I extracted the orphan css into another file and overwrote it as follows:

.popover[class*="tour-"].orphan { left: 50% !important; top: 50% !important; margin-top: 0; position: absolute; transform: translate(-50%, -50%) !important; }

put this after the bootstrap-tour.css entry in your code. Should work.