Update documentation on default template and changes for bootstrap 4/4.1

[Thibaultfq]

Having had a play with the source, I think the issue for lack of title and content is due to the default template, currently it is

template: '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-secondary" data-role="prev">&laquo; Prev</button> <button class="btn btn-sm btn-secondary" data-role="next">Next &raquo;</button> <button class="btn btn-sm btn-secondary" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> </div> <button class="btn btn-sm btn-secondary" data-role="end">End tour</button> </div> </div>',

but it should be

template: '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-header"></h3> <div class="popover-body"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-secondary" data-role="prev">&laquo; Prev</button> <button class="btn btn-sm btn-secondary" data-role="next">Next &raquo;</button> <button class="btn btn-sm btn-secondary" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> </div> <button class="btn btn-sm btn-secondary" data-role="end">End tour</button> </div> </div>',

Note I have just changed the classes
popover-title
popover-content

to
popover-header
popover-body

Originally posted by @BenMaxfield in #643 (comment)

[viktorsmari]

@Thibaultfq is that all you had to do?
I am using Bootstrap 4.1.3 and I get nothing when I start the tour.
When I enable backdrop:true I can see the element I chose in steps one highlighted, but nothing more.
I tried adding your template but still gives me nothing.

[Thibaultfq]

@Thibaultfq is that all you had to do?
I am using Bootstrap 4.1.3 and I get nothing when I start the tour.
When I enable backdrop:true I can see the element I chose in steps one highlighted, but nothing more.
I tried adding your template but still gives me nothing.

Are you using the standalone css of bootstrap-tour? I had the same issue and resolved it by using the bootstrap-tour.min.css file. The standalone mixes bootstrap 3 and 4 up it seems...

[viktorsmari]

Are you using the standalone css of bootstrap-tour?

I was indeed using the standalone. I gave up and started trying Shepherd.js instead

[Thibaultfq]

Use the standalone js but the normal CSS and it should work.

[IGreatlyDislikeJavascript]

https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist

Handles bootstrap 3 and 4 using a new "framework" option