search

sorich87 / bootstrap-tour

Quick and easy product tours with Twitter Bootstrap Popovers
http://bootstraptour.com
MIT License
4.44k stars 942 forks source link

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

Open Thibaultfq opened 5 years ago

Thibaultfq commented 5 years ago

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 https://github.com/sorich87/bootstrap-tour/pull/643#issuecomment-393542780

viktorsmari commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

IGreatlyDislikeJavascript commented 5 years ago

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

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