Last active
April 7, 2017 07:05
-
-
Save rhythmpatel/9bf78d166bbec2f186ec to your computer and use it in GitHub Desktop.
BS Popover
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Bootstrap Popover on hover | |
| * Problem: When the user moves the mouse on the popover, it should not close | |
| * Solution from fiddle - http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/ | |
| */ | |
| var originalLeave = $.fn.popover.Constructor.prototype.leave; | |
| $.fn.popover.Constructor.prototype.leave = function(obj){ | |
| var self = obj instanceof this.constructor ? | |
| obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) | |
| var container, timeout; | |
| originalLeave.call(this, obj); | |
| if(obj.currentTarget) { | |
| container = $(obj.currentTarget).siblings('.popover') | |
| timeout = self.timeout; | |
| container.one('mouseenter', function(){ | |
| //We entered the actual popover – call off the dogs | |
| clearTimeout(timeout); | |
| //Let's monitor popover content instead | |
| container.one('mouseleave', function(){ | |
| $.fn.popover.Constructor.prototype.leave.call(self, self); | |
| }); | |
| }) | |
| } | |
| }; | |
| $('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Popover #1 --> | |
| <a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a> | |
| <hr> | |
| <!-- Popover #2 --> | |
| <a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a> | |
| <!-- Content for Popover #1 --> | |
| <div id="a1" class="hidden"> | |
| <div class="popover-heading">This is the heading for #1</div> | |
| <div class="popover-body">This is the body for #1</div> | |
| </div> | |
| <!-- Content for Popover #2 --> | |
| <div id="a2" class="hidden"> | |
| <div class="popover-heading">This is the heading for #2</div> | |
| <div class="popover-body">This is the body for #2<br> | |
| With <b>html</b> content | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| $("[data-toggle=popover]").popover({ | |
| html : true, | |
| content: function() { | |
| var content = $(this).attr("data-popover-content"); | |
| return $(content).children(".popover-body").html(); | |
| }, | |
| title: function() { | |
| var title = $(this).attr("data-popover-content"); | |
| return $(title).children(".popover-heading").html(); | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: BS Popover | |
| description: Bootstrap popover | |
| authors: | |
| - Rhythm | |
| resources: | |
| - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js | |
| - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css | |
| normalize_css: no | |
| wrap: b | |
| panel_js: 1 | |
| panel_css: 1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment