see:
http://jsfiddle.net/tingwang/K48Gh/1/

the button tag is quoted.

Hello,
We have just add bootstrapx-clickover to twittstrap resources list
http://twittstrap.com/resources/details/bootstrapx-clickover
Under : Components
Regards

In the source code of clickover, class_name is used to add a class to a clickover.

In the docs 'class' is mentioned as an option.
http://www.leecarmichael.com/bootstrapx-clickover/examples.html#

Not sure how to do a pull request from my fork, but here is the commit with the new feature:

borisreitman@8bade10

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

When i click close button on popup, it closed and then open fast and then close popup.
any help me? thanks

I'd like to disable a clickover while the thing containing the clickover is being dragged. Is there a way to do this? I've tried removing some (almost all!) of the data- attributes from the link that triggers the clickover, but it keeps coming up. Is there a way to do this?

In Bootstrap 2.1, both the .popover-inner and the .popover itself need the width set, or things go terribly awry. I hacked a solution by adding 1 line after these:

  // set popover's dim's
  this.options.width  && this.tip().find('.popover-inner').width(  this.options.width  );
  this.options.height && this.tip().find('.popover-inner').height( this.options.height );

  // new line
  this.options.width  && this.tip().width(  this.options.width  );

the 'onHidden' handler and other parts are not properly run when clickover is closed using either body click, auto close or data-dismiss element.

Need to add docs on:

• onHidden event
• allow_multiple and display behavior
• width & height
• new clickover class on tip element

If you have a Bootstrap style of close button in the clickover (e.g. ×), it will scroll the page to the top because of the href="#". This does not happen with Bootstrap controls.

This can be fixed by adding a return false:
×

However, would be nice to not have to remember it, if it can be easily fixed in the bootstrapx-clickover code.

This issue does not occur if closing the clickover box by clicking outside, or on the original element.

This statement doesn't seem to be firing in an iphone:
"$('body').on( this.attr.click_event_ns, function(e) {..."

So, an open clickover remains open when the body is clicked (or 'touched').

This may be a Safari mobile bug/feature : click events don't bubble all the way up to body.

Is there a solution (or even a hack)?

$('.img-circle').clickover().click(); works but $('.img-square').clickover('show'); or at least global_close won't work, see also: http://bootply.com/66601 and http://stackoverflow.com/a/17508315/1596547

Hi ,
I create a edit form in clickover. I would like save change in data-content.
Example : and i change the value , i would like save this change in data-content
It's possible ?

Thx

Michael

How can I achieve content loaded with ajax with no issues? Something like..

$('.list-ajax-popover').popover({"trigger": "manual", "html":"true"});
$('.list-ajax-popover').click( function() {
  var el = $(this);
  $.ajax({
    type: 'POST',
    url: '/lists/ajax_index',
    dataType: 'html',
    data: {resource_id: el.data('resource-id')},
    cache: false,
    success: function(data) {
      el.attr('data-content', data);
      el.clickover();   

    },
    error: function(data) {
       alert('err');
       el.attr('data-content', data);
       el.clickover();

    }
  });
});

in clickery if you add a console.log as in below you can see that it appears to be called once for each time the popover anchor was clicked. once you click on another popoever element it resets itself

// provide callback hooks for post shown event
typeof this.options.onShown == 'function' && this.options.onShown.call(this);
console.log('click over triggering shown');
this.$element.trigger('shown');

If you put tip_id as an option, the this.options.tip_id is correct, but by the tip the popover renders, the tip_id is randomly generated.

Thus -- it isn't possible to set the id of the popover (at all)

it would be nice, if there will be a hover option!

the popover should be stay some time after hoverout or when mouseover another element that fires the popover.

When resizing the page the clickover doesn't move properly with trigger element.

see pull request #11

For those who got it working can you share? I download the latest bootstrap and then use this clickover. wont work

thanks

auto close works, but not the click outside clickover. Previous patches I've read here don't apply to 3.0.1 bootstrap code.

FYI the quckstart.html gives error:

Failed to load resource file:///S:/Downloads/lecar-red-bootstrapx-clickover-38cd220/lecar-red-bootstrapx-clickover-38cd220/docs/css/bootstrap.css````

I have setup a jsfiddle http://jsfiddle.net/bababalcksheep/Wbnj2/15/

I am re-editing my issue to make it more clear.
If you have 2 button that have same clickover call attached to them via rel attribute lets say(see above fiddle).
If you click any of first button, clickover opens, and while it is open, if you click on second button, first clickover closes and second opens but actions defined on 2nd clickover which are actually same as first don't work.

This works in following way.
Click first button, click anywhere except 2nd button to close it and then click on 2nd button.

But then whats the point in using clickover ?:( Kindly suggest a fix for this as this is very annoying.

when initializing 2-3 clickovers like this
$('[rel="clickover"]').clickover();

the name space for each of them could get the same timestamp from Date() i.e this.attr.click_event_ns could be same.

Hence with allow_multiple option to 0, we miss $(body) click events because the previous hide will "off" the same namespace on body click event.

I just put a hack around with this.

this.attr.click_event_ns = "click." + this.attr.me + "." + element.id; // Adding the elements id to distinguishing the namespace.

Not the right solution but works for me.

When opening the clickover, you add an event via this.tip().on('click', '[data-dismiss="clickover"]', $.proxy(this.clickery, this));

please also remove it afterwards via this.tip().off('click', '[data-dismiss="clickover"]', $.proxy(this.clickery, this));

otherwise every time i try to close the same clickover, the clickery method is called one more time

cheers
Peter

Steps:

If you have multiple clickover elements on the screen, click on one then click on another.

Expected Behavior:

First click over disappears, second one appears

Actual Behavior:

First click over does not disappear, leaving multiple click overs appearing

This plugin is exactly what I have been looking for as I needed to have a button in the popover.

Do you have any plans to include a hover trigger instead of a manual trigger? I changed line 42 to be 'mouseover" instead of 'click'. The only problem with this is that if you mouseover again, it hides the popover. I also am not sure how well this would degrade for mobile devices.

Thanks

Hi,

Sometime you may want to hide the Clickover after some action other than global click or timer and the default $.popover('hide') or $.clickover('hide') is buggy.
I have hacked my way little bit to add another option 'forcehide' and intercept it:

Line 188:
if (typeof option == 'string') {
    if (option === 'forcehide') data.clickery();
    else data[option]();
}

This is just a work around for me to get it done :)

Cheers,
Hugh

http://www.leecarmichael.com/bootstrapx-clickover/examples.html

The option to set as class to its main parent element is called "class_name", not "class" - the website needs update.

I have some pages that don't have a lot of content. The clickover button is 20% from the top. If i click anywhere above the button link the clickover will close. Clicking anywhere below the button or end of content it will not close.

just fyi

Here's a sample.

    <script>
      function test_close(){
        $('#mybutton1').clickover('hide');
      } 
      function test_show(){
        $('#mybutton1').data().clickover.show();
        //$('#mybutton1').clickover('show');
      }
      $(function() {
        $('#mybutton1').clickover();
      })   
    </script>
    <button onclick="test_close()" onclick="test_close();">hide</button>
    <button onclick="test_show()" onclick="test_close();">show</button>    
    <a href="#" id="mybutton1" class="btn btn-secondary" data-content="Hello World">dummy</a>

Click the button "show", the popup appears correctly. However, now click outside it, it should close. But doesn't. This doesn't happen if the button "dummy" is clicked -- everything works correctly. Note: after every experiment with this page, refresh it to reset the state.

The reason for this bug is that clickery() function is never called when manually showing.

Add class of 'clickover' on clickover widgets

Suppose i have some content i DOM which will be inserted dynamically (more element with class .toolbox-ajax-popover). How do I make them clickoverable?

$('.toolbox-ajax-popover').clickover({
});

hi,

I'm trying to set 'width' and it doesn't seem to work as expected. I'm on bootstrap 2.2.2, I don't know about older versions.

Currently these options are set on the inner container 'popover-inner':

this.options.width  && this.tip().find('.popover-inner').width(  this.options.width  );

but the problem is bootstrap sets a fixed width of 236px on the parent div 'popover' [0]

I'm proposing changing the 'width' attribute directly on the parent div like the following:

this.options.width  && this.tip().width(  this.options.width  );

fyi 'height' seems to work fine, but I'd apply the same fix just to have some consistency

also, you should really link to the github/issues page from the examples it helps a lot :)

forgot to say thanks for this awesome plugin! ;)

[0] https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L5298

Lee,

Thanks for this. It looks very useful.
Have you put any thought into controlling the width of the popover?

Regards,
Francisco

I hate to bother you with what is probably a mistake on my part, but I can't figure out what's missing. The click over is functioning fine for the most part but the click anywhere else to close is not wanting to work here.

http://jsfiddle.net/nosfan1019/FBU7w/

Hi there,

I have a bit of a strange problem, and of course the culprit is IE9 (isn't it always?). I am using the clickover to show a navigational component. As I understand it, the clickover destroys itself whenever it is closed, so I am using the onShown and onHidden handlers along with jQuery .detach() and .append() commands to "save" the navigational component to an invisible div whenever the clickover is not visible.

This all works great on Firefox, Chrome, iOS Safari and even IE10. But in IE9, it seems that my navigational component is already destroyed by the time the onHidden handler is called. Would anybody know of any reason why this is, and what could be done to get around the problem?

Currently, to remove the title you have to set the

.popover-title {
        display: none;
}

An option in your lib might be good.

when you click on a clickover nothing happend and you see a error in the console:

Uncaught TypeError: Cannot read property 'currentTarget' of undefined
Tooltip.toggle
$.extend.clickery
e.extend.proxy.g
f.event.dispatch
f.event.add.h.handle.i

, toggle: function (e) {
var self = $(e.currentTarget)this.type.data(this.type)
Uncaught TypeError: Cannot read property 'currentTarget' of undefined
selfself.tip().hasClass('in') ? 'hide' : 'show'
}

Hi,

great plugin, it helped me a lot.

Here is how I use it, I have bunch of popups in my page. Each popup has a form in it. Those forms are jquery ajax forms, and when I get a response from server I call clickover('hide') to hide that popup. But when I click on a button to open that popup again it is not shown.
I found out when I call clickover('hide') and remove attribute 'data-clickover-open' everything is ok.
So maybe you should just add a remove of 'data-clickover-open' when calling hide.

I might be using it in a incorrect way, but I wanted to inform you :)

Thanks again, awesome plugin just what I've needed 👍

Hey, maintainer(s) of lecar-red/bootstrapx-clickover!

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 lecar-red/bootstrapx-clickover 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": "lecar-red/bootstrapx-clickover",
  "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!

Hey,

I have a problem adding the select2 plugin (http://ivaynberg.github.io/select2/) into the clickover. It seems that it doesn't want to bind the select2 to the select element within the clickover.

Does anyone know how to do this ?
Thank you !

selector option doesn't seem to work for me:

$('body').clickover({selector: '[rel=clickover]'});

It is a nice option to have when you have clickover triggering elements rendered by ajax after the page load.

Am I doing something wrong, or is this currently not supported?

Thanks.