BootstrapX - clickover

BootstrapX - clickover provides a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus.

See Example

Why?

As part of a recent project we needed many of the features of Bootstrap Popovers but wanted to provide forms and other items in them that made using popovers very manually tendious.

clickover provide much nicer usage than popovers or tooltips for tablet users as well. By leaving widget open until closed and combined with auto_close option can provide tooltip/popover like fade support.

Clickover Features

  • Click to open and close
  • Supports in clickover close button or element
  • Option to close clickover when click is else where in body
  • auto timeout option - Allows clickover to automatically close after some amount of time

Details

Button will open clickover click else where to close

Code

Enable clickover via javascript:

$('#example').clickover(options)

Options

Name type default description
auto_close number 0 Value in milliseconds. Values greater than 0 will trigger clickover to auto close in that time
global_close boolean true True will have clickover close when click event elsewhere in body is triggered
esc_close boolean true Clickover will be closed when esc key is pressed by user.
onShown function undefined Will run function with current object as this
onHidden function undefined Will run function with current object as this when clickover is closed.
width pixel value null clickover will have width set to this value after its shown.
height pixel value null clickover will have height set to this value after its shown.
tip_id string null clickover will have this set as id after its shown.
class string 'clickover' clickover will have this set as class to its main parent element.
allow_multiple boolean false When set to true allow multiple clickovers to be opened on page at same time.

Changing defaults

To change the defaults for the page do the following:

          $().clickover.defaults.option_name
          

Markup

Just like Tooltip and Popover, Clickover is opt in data-api.

$('[rel="clickover"]').clickover()

Close Element

For now to have element inside clickover close it you must use attribute:

data-toggle="clickover"

Few Examples

Auto close in 15 seconds:

$('#auto-close-co').clickover({
  auto_close: 15 * 1000            
}); 

Only close clickover with button:

 $('#no-global-co').clickover({ global_close: false}); 

With onShown event handler

 $('#shown-co').clickover({ onShown: function() { alert("not very helpful") }} ); 

Explicity set width & height

 $('#set-tall-skinny').clickover({ width: 50, height: 300 }); 

By default clickover will close when 'esc' key is pressed, disabled here

 $('#no-esc').clickover({ placement: 'top', esc_close: 0 });