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

docs/assets/js/bootstrap-tooltip.js

@@ -38,19 +38,27 @@
   , init: function (type, element, options) {
       var eventIn
         , eventOut
+        , triggers
+        , trigger
+        , i
 
       this.type = type
       this.$element = $(element)
       this.options = this.getOptions(options)
       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 ?
@@ -267,7 +275,7 @@
   , placement: 'top'
   , selector: false
   , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
-  , trigger: 'hover'
+  , trigger: 'hover focus'
   , title: ''
   , delay: 0
   , html: false

docs/assets/js/bootstrap.js

@@ -1075,19 +1075,27 @@
   , init: function (type, element, options) {
       var eventIn
         , eventOut
+        , triggers
+        , trigger
+        , i
 
       this.type = type
       this.$element = $(element)
       this.options = this.getOptions(options)
       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 ?
@@ -1304,7 +1312,7 @@
   , placement: 'top'
   , selector: false
   , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
-  , trigger: 'hover'
+  , trigger: 'hover focus'
   , title: ''
   , delay: 0
   , html: false

docs/javascript.html

@@ -836,8 +836,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              <tr>
                <td>trigger</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>
                <td>delay</td>

docs/templates/pages/javascript.mustache

@@ -766,8 +766,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              <tr>
                <td>{{_i}}trigger{{/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>
                <td>{{_i}}delay{{/i}}</td>

js/bootstrap-tooltip.js

@@ -38,19 +38,27 @@
   , init: function (type, element, options) {
       var eventIn
         , eventOut
+        , triggers
+        , trigger
+        , i
 
       this.type = type
       this.$element = $(element)
       this.options = this.getOptions(options)
       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 ?
@@ -267,7 +275,7 @@
   , placement: 'top'
   , selector: false
   , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
-  , trigger: 'hover'
+  , trigger: 'hover focus'
   , title: ''
   , delay: 0
   , html: false