Skip to content

B
bootstrap
Commit fad0fb68 authored by fat's avatar fat
Browse files
Options

allow multiple trigger types in tooltip and popover + default tooltip to hover & focus

parent e2434fef
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 29 deletions
docs/assets/js/bootstrap-tooltip.js
View file @ fad0fb68
...@@ -38,19 +38,27 @@ ...@@ -38,19 +38,27 @@
, init: function (type, element, options) { , init: function (type, element, options) {
var eventIn var eventIn
, eventOut , eventOut
, triggers
, trigger
, i
this.type = type this.type = type
this.$element = $(element) this.$element = $(element)
this.options = this.getOptions(options) this.options = this.getOptions(options)
this.enabled = true this.enabled = true
if (this.options.trigger == 'click') { triggers = this.options.trigger.split(' ')
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (this.options.trigger != 'manual') { for (i = triggers.length; i--;) {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' trigger = triggers[i]
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' if (trigger == 'click') {
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } else if (trigger != 'manual') {
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = 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))
}
} }
this.options.selector ? this.options.selector ?
...@@ -267,7 +275,7 @@ ...@@ -267,7 +275,7 @@
, placement: 'top' , placement: 'top'
, selector: false , selector: false
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
, trigger: 'hover' , trigger: 'hover focus'
, title: '' , title: ''
, delay: 0 , delay: 0
, html: false , html: false
......
docs/assets/js/bootstrap.js
View file @ fad0fb68
...@@ -1075,19 +1075,27 @@ ...@@ -1075,19 +1075,27 @@
, init: function (type, element, options) { , init: function (type, element, options) {
var eventIn var eventIn
, eventOut , eventOut
, triggers
, trigger
, i
this.type = type this.type = type
this.$element = $(element) this.$element = $(element)
this.options = this.getOptions(options) this.options = this.getOptions(options)
this.enabled = true this.enabled = true
if (this.options.trigger == 'click') { triggers = this.options.trigger.split(' ')
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (this.options.trigger != 'manual') { for (i = triggers.length; i--;) {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' trigger = triggers[i]
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' if (trigger == 'click') {
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } else if (trigger != 'manual') {
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = 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))
}
} }
this.options.selector ? this.options.selector ?
...@@ -1304,7 +1312,7 @@ ...@@ -1304,7 +1312,7 @@
, placement: 'top' , placement: 'top'
, selector: false , selector: false
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
, trigger: 'hover' , trigger: 'hover focus'
, title: '' , title: ''
, delay: 0 , delay: 0
, html: false , html: false
......
docs/assets/js/bootstrap.min.js
View file @ fad0fb68
This diff is collapsed.
docs/javascript.html
View file @ fad0fb68
...@@ -836,8 +836,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -836,8 +836,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<tr> <tr>
<td>trigger</td> <td>trigger</td>
<td>string</td> <td>string</td>
<td>'hover'</td> <td>'hover focus'</td>
<td>how tooltip is triggered - click | hover | focus | manual</td> <td>how tooltip is triggered - click | hover | focus | manual. Note, you case pass trigger mutliple, space seperated, trigger types.</td>
</tr> </tr>
<tr> <tr>
<td>delay</td> <td>delay</td>
......
docs/templates/pages/javascript.mustache
View file @ fad0fb68
...@@ -766,8 +766,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -766,8 +766,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<tr> <tr>
<td>{{_i}}trigger{{/i}}</td> <td>{{_i}}trigger{{/i}}</td>
<td>{{_i}}string{{/i}}</td> <td>{{_i}}string{{/i}}</td>
<td>'hover'</td> <td>'hover focus'</td>
<td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual</td> <td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual. {{_i}}Note you case pass trigger mutliple, space seperated, trigger types.{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td>{{_i}}delay{{/i}}</td> <td>{{_i}}delay{{/i}}</td>
......
js/bootstrap-tooltip.js
View file @ fad0fb68
...@@ -38,19 +38,27 @@ ...@@ -38,19 +38,27 @@
, init: function (type, element, options) { , init: function (type, element, options) {
var eventIn var eventIn
, eventOut , eventOut
, triggers
, trigger
, i
this.type = type this.type = type
this.$element = $(element) this.$element = $(element)
this.options = this.getOptions(options) this.options = this.getOptions(options)
this.enabled = true this.enabled = true
if (this.options.trigger == 'click') { triggers = this.options.trigger.split(' ')
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (this.options.trigger != 'manual') { for (i = triggers.length; i--;) {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' trigger = triggers[i]
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' if (trigger == 'click') {
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } else if (trigger != 'manual') {
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = 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))
}
} }
this.options.selector ? this.options.selector ?
...@@ -267,7 +275,7 @@ ...@@ -267,7 +275,7 @@
, placement: 'top' , placement: 'top'
, selector: false , selector: false
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
, trigger: 'hover' , trigger: 'hover focus'
, title: '' , title: ''
, delay: 0 , delay: 0
, html: false , html: false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment