Skip to content

Commit

Permalink
add click option for tooltip, popover - make click default for popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@fat
fat committed Aug 19, 2012
1 parent 44e35e9 commit 45dddc5
Show file tree
Hide file tree
Showing 9 changed files with 26 additions and 17 deletions.
1 change: 1 addition & 0 deletions docs/assets/js/bootstrap-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'right'
, trigger: 'click'
, content: ''
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
Expand Down
6 changes: 4 additions & 2 deletions docs/assets/js/bootstrap-tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@
this.options = this.getOptions(options)
this.enabled = true

if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
if (this.options.trigger == 'click') {
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
Expand Down
7 changes: 5 additions & 2 deletions docs/assets/js/bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1006,8 +1006,10 @@
this.options = this.getOptions(options)
this.enabled = true

if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
if (this.options.trigger == 'click') {
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
Expand Down Expand Up @@ -1330,6 +1332,7 @@

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'right'
, trigger: 'click'
, content: ''
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/js/bootstrap.min.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions docs/javascript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,7 @@ <h4 id="three">three</h4>
<h2>Usage</h2>

<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to scrollspy with the <code>.nav</code> class.</p>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
<pre class="prettyprint linenums">&lt;body data-spy="scroll" data-target=".navbar"&gt;...&lt;/body&gt;</pre>

<h3>Via JavaScript</h3>
Expand Down Expand Up @@ -829,7 +829,7 @@ <h3>Options</h3>
<td>trigger</td>
<td>string</td>
<td>'hover'</td>
<td>how tooltip is triggered - hover | focus | manual</td>
<td>how tooltip is triggered - click | hover | focus | manual</td>
</tr>
<tr>
<td>delay</td>
Expand Down Expand Up @@ -922,7 +922,7 @@ <h3 class="popover-title">Popover left</h3>

<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Hover for popover</a>
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>


Expand Down Expand Up @@ -972,8 +972,8 @@ <h3>Options</h3>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover'</td>
<td>how popover is triggered - hover | focus | manual</td>
<td>'click'</td>
<td>how popover is triggered - click | hover | focus | manual</td>
</tr>
<tr>
<td>title</td>
Expand Down
8 changes: 4 additions & 4 deletions docs/templates/pages/javascript.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -759,7 +759,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>{{_i}}trigger{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'hover'</td>
<td>{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual</td>
<td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual</td>
</tr>
<tr>
<td>{{_i}}delay{{/i}}</td>
Expand Down Expand Up @@ -852,7 +852,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Hover for popover{{/i}}</a>
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
</div>


Expand Down Expand Up @@ -902,8 +902,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<tr>
<td>{{_i}}trigger{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'hover'</td>
<td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
<td>'click'</td>
<td>{{_i}}how popover is triggered{{/i}} - click | hover | focus | manual</td>
</tr>
<tr>
<td>{{_i}}title{{/i}}</td>
Expand Down
1 change: 1 addition & 0 deletions js/bootstrap-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'right'
, trigger: 'click'
, content: ''
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
Expand Down
6 changes: 4 additions & 2 deletions js/bootstrap-tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@
this.options = this.getOptions(options)
this.enabled = true

if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
if (this.options.trigger == 'click') {
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
Expand Down
2 changes: 1 addition & 1 deletion js/tests/unit/bootstrap-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ $(function () {
})

test("should destroy popover", function () {
var popover = $('<div/>').popover().on('click.foo', function(){})
var popover = $('<div/>').popover({trigger: 'hover'}).on('click.foo', function(){})
ok(popover.data('popover'), 'popover has data')
ok(popover.data('events').mouseover && popover.data('events').mouseout, 'popover has hover event')
ok(popover.data('events').click[0].namespace == 'foo', 'popover has extra click.foo event')
Expand Down

0 comments on commit 45dddc5

Please sign in to comment.