clu3/bootstro.js

Tiny JS library using bootstrap's popovers to help guide your users around your website

bootstro.js's Issues

Capture keyboard focus

Hi there,
Is there a way I can capture keyboard focus within the popover once active. Currently I'm still able to tab through other controls behind the mask.

Thanks for a really useful plugin by the way.

Kind regards,
Brian

Modals don't work when using this popover tutorial

Modals don't work when you have the popover tutorial on the page. Any way around this that you know of?

not auto scrolling

Hi, i have multiple elements in a long height screen, bootstro doesn't scroll to the bottom to make the popover visible, is this a common problem?

Support for Bootstrap 4

;)

Keyboard shortcuts do not work

Windows 7 64-bit
Google Chrome Version 26.0.1410.33 beta-m

onComplete never gets called

I'm not sure if this is a bug or I'm wrong about the intended functionality of the onComplete function.

But when bootstro.next is called, the activeIndex is always 2 less than the count. activeIndex being incremented from 0, and count being the total count. E.g. when I am on step 7 of 8 on your demo page, and click next, the activeIndex = 6 and the count is = 8.

Therefore the onComplete call in the below code is never called.

bootstro.next = function()
{
if (activeIndex + 1 == count)
{
if (typeof settings.onComplete == 'function')
settings.onComplete.call(this, {idx : activeIndex});//
}
else
{
bootstro.go_to(activeIndex + 1);
if (typeof settings.onStep == 'function')
settings.onStep.call(this, {idx : activeIndex, direction : 'next'});//
}
};

What confuses me is the "else" statement. Are you intending for the onComplete here to be accesses with a next button located on the last step of the tour? Shouldn't that be an onExit?

What we are trying to use the onComplete for is to flag in our db that the tour has been taken. In that case, the code should read like:

bootstro.next = function()
{
if (activeIndex + 2 == count)
{
//call onComplete callback function if needed
if (this.onCompleteFunc != undefined) {
this.onCompleteFunc.call(this, { idx : activeIndex });
}
}
bootstro.go_to(activeIndex + 1);
if (typeof settings.onStep == 'function')
settings.onStep.call(this, {idx : activeIndex, direction : 'next'});//
};

Don't show next-Button if only one step

Shows "next" Button if there is only one step.

Opacity issues with '.bootstro-backdrop' if called on more than once

Bootstro will darkening the '.bootstro-backdrop' each time you click an element that is launching Bootstro. This should be prevented.

Don't always scroll to the top

When the intro'ed control is already entirely visible on the screen, there's no need to scroll it to the very top. Otherwise on the vertically oriented (or just big enough) screens it becomes very inconvenient to read.

onStart() callback

First of all, this library is awesome. Now my problem is I want to add a class when tour starts.

I saw callbacks like onstep(), onexit(). is there anything like onStart().

like bootstro.start()... and i want to add class to the popover it creates.

Steps for list item in dropdowns?

Is there anyway to allow bootstro to show popovers for items in button dropdowns?

I did tied by targetting the

then the inside the

but it simply didn't do anything.

Finish button prevent default

The finish bootstro sometimes submits the form.

posible fix:

//end of show
$("html").on('click.bootstro', ".bootstro-finish-btn", function(e) {
e.preventDefault();//add this line
bootstro.stop();
});

bootstro.js with bootstrap Modal

Does anyone have a working example for bootstro.js with Bootstrap Modal?

Copyright problem and DMCA takedown

Hey guys,

I'm Afshin, the author of Intro.js.
As you mentioned before in the HN thread, tweets and..., you used Intro.js idea to show steps, present layers and more...

Why you don't mention that in the Github repository and the README?

popover exiting if href=""

Hi,
great work you have here :)
Here is a little bug? I´ve found.
The popover was exiting, and I couldnt found what why.
The problem is that I had in the link that start the boostro this:
a class="alert alert-block" id="help" href=""

the fix was to have href="#"

Just a quick advice to turn this even better.
You could use a configuration js like this:

jQuery(function($) {
  var tour = new Tour();

  tour.addStep({      
    element: "#passo1",    
    placement: "bottom",
    animation:true,
    title: "help ?",    
    content: "content things"
  });

instead of having to change html adding data-bootstro-title and data-bootstro-content.

That example was taken from http://sorich87.github.com/bootstrap-tour/

Thanks,
jcorreia

bootstro step on a element with ToolTip do not show step count e.g. 3/10

Currently if you define a step on an element with an tooltip already defined (existing data-original-title) this title will get shown in the step header section instead of the bootstro-step-title tag.
After checking the tooltip,js of bootstrap, this is the "default" behavior, but I would wonder if I would be the only one how has this issue and if there would be an way to fix this. E.g. what about a template with already a given counter section?

Handle missing steps

Hello, nice plugin.

Currently it behaves strange, when steps are missing, for instance 1,2,4

This can occur, when some functionality of a page is depending on the role of a user that logs in. So some steps are optional.

Cheers.

P.S: Mentioning intro.js doesn't hurt ;)

license

You should make it MIT if what you say in your license section is true.

It does the exact same thing as your license but also makes it so that you are not personally liable for any 'damage' caused by your software. Which will probably be nothing forever but may not be.

And people are used to the MIT.

Remove next step button for a specific step

Hi, I'm using bootstro for making a tutorial of a web application and I want to make it a little bit interactive. So I assigned bootstro.next() function to some buttons and I want users pass these steps by only using these buttons, not the "next step" button. So I need to remove them in some steps. Is it possible to do this?

Thanks.

All cdn dependencies in a single code block in tutorial

It would be great if there was a code example in the tutorial that would contain html code with all of the links to a cdn with every single dependency.

I am currently struggling with getting the dependencies right (as I am not used to working with bootstrap) not to mention the fact that the link to bootstrap popover on your site leads to a dead end ( http://twitter.github.com/bootstrap/javascript.html#popovers ).

I simple code that I could just copy and paste to my header would be nice :)

Next buttons don't appear in bootstro popover

(User error)

Bootstro can't handle the top nav bar

Hi, I tried the last code version, but couln't make the fixed navbar works with bootstro. I made this fiddle:

http://jsfiddle.net/NJsYw/5/

thanks

Bootstro Demo is broken in Chrome

Hi,

Just a heads up that your demo is broken in chrome at the moment.

This is because the bootstro.js file is being served with a mime type of plain/text when using the raw URL:
https://raw.github.com/clu3/bootstro.js/master/bootstro.js

Previously this only caused a warning in chrome but now it causes an error and the script no longer executes.

I'm using Chrome 31.0.1650.57 m on Windows 7.

Cheers
Rob

Bootstrap 3 support

any chances of having support for bootstrap 3?

thanks

popover defined width and small screens (mobile)

i made this change to the code for a website im working on

on line 187 (inside get_popup function)

 if ($el.attr('data-bootstro-width'))
 {
     p.width = $el.attr('data-bootstro-width'); 
     var width_without_px = p.width.substr(0 , p.width.indexOf('px'));
     if(width_without_px > $(window).width()){//if bigger then screen
        p.width = ($(window).width()-10)+'px';
        $el.attr('data-bootstro-width' ,p.width );
        p.placement = 'bottom';
      }
style = style + 'width:' + $el.attr('data-bootstro-width') + ';'

}

so what it does is if popover width defined check the width and window width, if popover is bigger then screen make it smaller then screen and make placement bottom.

hope youj find it usefull

itamar

Finish button only on last slide.

Been trying to implement this but can't seem to get it to work quite right. Think it's much cleaner to have the finish button only show up on the final slide.

Option to remove arrows on selected popovers

It would be nice to include a class or data attribute that you can add to an individual popover to remove the arrow for only that selected popover.

For example, if you wanted to start a stepped tutorial with a modal like intro that isn't linked to a particular element on the page (hence wouldn't need an arrow).

What I did to hack around this was to change the css to hide the highlighted element but show the popover so it seems like the popover isn't tied to any element on the page. However the arrow still appears which ruins the whole effect.

I tried to target the individual popovers through css to solve this, but the problem is that the popovers are generated in the DOM underneath the elements they're appended to, not INSIDE the elements, so I can't target each popover individually through its parent element id or class. Which leaves only a jquery option.

I started by stripping

<div class="arrow"></div>

out of bootstro.js template and then basically adding it in only when a class in called to a certain id.

 $(document).ready(function() {
        elem = $('div#name');
        if (elem.hasClass('add-arrow')) {
            $('.popover').append('<div class="arrow"></div>');
        } 
    });

It seems to work on the element only when the page is first loaded and is the first step. It does not work on subsequent steps or when one goes back to the first step. It appears the bootstro.js is overriding this script except when the page is first loaded. I have placed this script at the bottom of the page for bootstro custom options and not in the bootstro.js itself.

Any ideas on how to modify this or even construct a custom data-attibute that would remove the arrow div? Any help would be greatly appreciated.

Thanks so much!
Mark Genest

automatic close (timeout) option

Is it possible to close intro tour after some seconds says having timeout option, if anyone don't click on it?

Allow the controls to be in the title area

Can we have an option to put the controls in the title area (aligned to the right corner)? Thanks.

Popup is not over the bootstro background

Hello all,
I configured bootstro to work with a json file in my bootstrap site (using sb admin 2 theme). I can launch it but the popups are displayed behind the bootstro background (black with 50% transparency)
If i use keys i can change to next or previous step but with the mouse a click closes all.
A z-index issue ?
Thanks (and great job)

Problem with affix elements and chrome/chromium

It seems there is a problem with the bootstrap's affix and bootstro's popover
when there is an "affix" in an element's class, the bootstro popover appears deactivated and you can't press any button on it.

Every thing is ok on Firefox!
any workaround is appreciated.
Thanks!

Doesn't work on IE6, IE7

My testing : it doesn't work on ie 8 and 7 and 6.

Responsive on element with position fixed

I'm trying to add the popover to an element with position fixed. The popover is then absolutely positioned with pixel values so it doesn't follow the element when the browser is resized, like it does with other relative elements.

Any ideas?

Demo for bootstrap 2 is now working

its not working here is console log

Refused to execute script from 'https://raw.github.com/clu3/bootstro.js/master/bootstro.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. bootstrap2.html:1
Uncaught ReferenceError: bootstro is not defined bootstrap2.html:417
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
body.scrollLeft is deprecated in strict mode. Please use 'documentElement.scrollLeft' if in strict mode and 'body.scrollLeft' only if in quirks mode.
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Needs version number

Can you use version numbers or some mechanism to let users know what version of the script they are running? This makes it easier to know if they need to update or not.

How to add a Start button

I'm trying to add to the three current buttons a start button to restart the tour, can this be done without writing new code, also is it possible to reset the tour. Currently when to you're done viewing the tour, the browser keeps record and on the next launch won't launch the tour. I want to add a Help link that resets this and runs the tour again.

navbar-fixed-top

With fixed-top navbar doesn't display correctly

Overlay gets darker on every start (ASP.NET Updatepanel)

I have a button whichs starts the tour. I'm using an ASP.NET Updatepanel.

Every time I call bootstro.start(); the overlay gets darker. This does not happen in your demo.

Maybe the plugin has to be destroyed before ?!

Difference between full and minified versions

Minified version does not include onStepFunc as a hook. Also does not contain onCompleteFunc and possibly others. It actually looks like the minified version has removed all hooks? The functionality between the regular and minified versions seem to greatly differ.

bootstro width

I've built bootstro with bootstrap 3.
Since popover's max-width is 276px, so I can't use width of popover more than 276px.
How can i fix it?

i18n

I would like to use this on a multilingual page, so I would like to have the possibility to have the labels depending of the current language. It would be no problem to pass this to the JavaScript call, so I just need an option to pass a language and select the needed translation.

Steps in json file

Can we call step order from within a json file?

e.g.

"selector":"#profilePic",
"title":"Ajaxed Title 2",
"content":"I was found because I have selector=#demo_ajax",
"width":"400px",
"placement":"bottom",
"step":"2"

doesnt work with tabs

Hi,
I´m using bootstrap tabs and I have elements that are inside this diferent tabs.
The problem is that they aren´t showing, if they are on different tabs..can you check this ?
Thanks :)

Bootstrop version

I tried to use it with Bootstrap 2.0.4 without success.
It gives me this error in the console:

TypeError: data[option] is not a function

$.fn.popover = function (option) {
  return this.each(function () {
  var $this = $(this)
  , data = $this.data('popover')
  , options = typeof option == 'object' && option
  if (!data) $this.data('popover', (data = new Popover(this, options)))
  if (typeof option == 'string') data[option]()
}) 

I think you have to mention supported bootstrap version.

onbefore_step call back?

Hi,

Would it be possible for you to add a callback which is called before the step is taken?

I have a hidden div (display:none) on the page for showing Alerts and Messages when required. I want a step to describe this but I need to show the div before that step is reached if bootsro is to correctly locate it.

If I could set it's visibility before reaching the step then it would be all good. I currently have to show the message in the previous step which isn't ideal.

Thanks for the great plugin by the way. Was up and running in minutes :-)

[enhancement] Add missing bower.json.

Hey, maintainer(s) of clu3/bootstro.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library clu3/bootstro.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "clu3/bootstro.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!