Merge branch '2.3.0-wip' of github.com:twitter/bootstrap into 2.3.0-wip
This commit is contained in:
commit
9749d6afc2
|
@ -43,14 +43,14 @@
|
||||||
|
|
||||||
// tooltip demo
|
// tooltip demo
|
||||||
$('.tooltip-demo').tooltip({
|
$('.tooltip-demo').tooltip({
|
||||||
selector: "a[rel=tooltip]"
|
selector: "a[data-toggle=tooltip]"
|
||||||
})
|
})
|
||||||
|
|
||||||
$('.tooltip-test').tooltip()
|
$('.tooltip-test').tooltip()
|
||||||
$('.popover-test').popover()
|
$('.popover-test').popover()
|
||||||
|
|
||||||
// popover demo
|
// popover demo
|
||||||
$("a[rel=popover]")
|
$("a[data-toggle=popover]")
|
||||||
.popover()
|
.popover()
|
||||||
.click(function(e) {
|
.click(function(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
|
@ -188,11 +188,18 @@
|
||||||
/* CAROUSEL DATA-API
|
/* CAROUSEL DATA-API
|
||||||
* ================= */
|
* ================= */
|
||||||
|
|
||||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||||
var $this = $(this), href
|
var $this = $(this), href
|
||||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||||
, options = $.extend({}, $target.data(), $this.data())
|
, options = $.extend({}, $target.data(), $this.data())
|
||||||
|
, slideIndex
|
||||||
|
|
||||||
$target.carousel(options)
|
$target.carousel(options)
|
||||||
|
|
||||||
|
if (slideIndex = $this.attr('data-slide-to')) {
|
||||||
|
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||||
|
}
|
||||||
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -129,7 +129,7 @@
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var $this = $(this)
|
var $this = $(this)
|
||||||
, data = $this.data('collapse')
|
, data = $this.data('collapse')
|
||||||
, options = typeof option == 'object' && option
|
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||||
if (typeof option == 'string') data[option]()
|
if (typeof option == 'string') data[option]()
|
||||||
})
|
})
|
||||||
|
|
|
@ -81,7 +81,10 @@
|
||||||
|
|
||||||
isActive = $parent.hasClass('open')
|
isActive = $parent.hasClass('open')
|
||||||
|
|
||||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||||
|
if (e.which == 27) $parent.find(toggle).focus()
|
||||||
|
return $this.click()
|
||||||
|
}
|
||||||
|
|
||||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||||
|
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
, $href = /^#\w/.test(href) && $(href)
|
, $href = /^#\w/.test(href) && $(href)
|
||||||
return ( $href
|
return ( $href
|
||||||
&& $href.length
|
&& $href.length
|
||||||
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
|
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||||
})
|
})
|
||||||
.sort(function (a, b) { return a[0] - b[0] })
|
.sort(function (a, b) { return a[0] - b[0] })
|
||||||
.each(function () {
|
.each(function () {
|
||||||
|
|
|
@ -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 @@
|
||||||
, 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
|
||||||
|
|
|
@ -449,11 +449,18 @@
|
||||||
/* CAROUSEL DATA-API
|
/* CAROUSEL DATA-API
|
||||||
* ================= */
|
* ================= */
|
||||||
|
|
||||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||||
var $this = $(this), href
|
var $this = $(this), href
|
||||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||||
, options = $.extend({}, $target.data(), $this.data())
|
, options = $.extend({}, $target.data(), $this.data())
|
||||||
|
, slideIndex
|
||||||
|
|
||||||
$target.carousel(options)
|
$target.carousel(options)
|
||||||
|
|
||||||
|
if (slideIndex = $this.attr('data-slide-to')) {
|
||||||
|
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||||
|
}
|
||||||
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -588,7 +595,7 @@
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var $this = $(this)
|
var $this = $(this)
|
||||||
, data = $this.data('collapse')
|
, data = $this.data('collapse')
|
||||||
, options = typeof option == 'object' && option
|
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||||
if (typeof option == 'string') data[option]()
|
if (typeof option == 'string') data[option]()
|
||||||
})
|
})
|
||||||
|
@ -706,7 +713,10 @@
|
||||||
|
|
||||||
isActive = $parent.hasClass('open')
|
isActive = $parent.hasClass('open')
|
||||||
|
|
||||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||||
|
if (e.which == 27) $parent.find(toggle).focus()
|
||||||
|
return $this.click()
|
||||||
|
}
|
||||||
|
|
||||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||||
|
|
||||||
|
@ -1068,19 +1078,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 ?
|
||||||
|
@ -1297,7 +1315,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
|
||||||
|
@ -1486,7 +1504,7 @@
|
||||||
, $href = /^#\w/.test(href) && $(href)
|
, $href = /^#\w/.test(href) && $(href)
|
||||||
return ( $href
|
return ( $href
|
||||||
&& $href.length
|
&& $href.length
|
||||||
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
|
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||||
})
|
})
|
||||||
.sort(function (a, b) { return a[0] - b[0] })
|
.sort(function (a, b) { return a[0] - b[0] })
|
||||||
.each(function () {
|
.each(function () {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -405,21 +405,21 @@ $('#myModal').on('hidden', function () {
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||||
<li><a tabindex="-1" href="http://google.com">Action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
|
||||||
<li><a tabindex="-1" href="#anotherAction">Another action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||||
<li><a tabindex="-1" href="#">Action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -427,11 +427,11 @@ $('#myModal').on('hidden', function () {
|
||||||
<li id="fat-menu" class="dropdown">
|
<li id="fat-menu" class="dropdown">
|
||||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||||
<li><a tabindex="-1" href="#">Action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -447,31 +447,31 @@ $('#myModal').on('hidden', function () {
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||||
<li><a tabindex="-1" href="#">Action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||||
<li><a tabindex="-1" href="#">Action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
|
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
|
||||||
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||||
<li><a tabindex="-1" href="#">Action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul> <!-- /tabs -->
|
</ul> <!-- /tabs -->
|
||||||
|
@ -769,17 +769,17 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
|
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
|
||||||
<p>Hover over the links below to see tooltips:</p>
|
<p>Hover over the links below to see tooltips:</p>
|
||||||
<div class="bs-docs-example tooltip-demo">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Four directions</h3>
|
<h3>Four directions</h3>
|
||||||
<div class="bs-docs-example tooltip-demo">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<ul class="bs-docs-tooltip-examples">
|
<ul class="bs-docs-tooltip-examples">
|
||||||
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||||
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||||
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||||
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -849,6 +849,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>container</td>
|
||||||
|
<td>string | false</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>
|
||||||
|
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
|
@ -858,7 +866,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
|
|
||||||
<h3>Markup</h3>
|
<h3>Markup</h3>
|
||||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||||
<pre class="prettyprint linenums"><a href="#" rel="tooltip" title="first tooltip">hover over me</a></pre>
|
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a></pre>
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>$().tooltip(options)</h4>
|
<h4>$().tooltip(options)</h4>
|
||||||
|
@ -930,16 +938,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
|
|
||||||
<h3>Live demo</h3>
|
<h3>Live demo</h3>
|
||||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
<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?">Click to toggle popover</a>
|
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4>Four directions</h4>
|
<h4>Four directions</h4>
|
||||||
<div class="bs-docs-example tooltip-demo">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<ul class="bs-docs-tooltip-examples">
|
<ul class="bs-docs-tooltip-examples">
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1423,9 +1431,9 @@ $('#myCollapsible').on('hidden', function () {
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div id="myCarousel" class="carousel slide">
|
<div id="myCarousel" class="carousel slide">
|
||||||
<ol class="carousel-indicators">
|
<ol class="carousel-indicators">
|
||||||
<li class="active"></li>
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||||
<li></li>
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||||
<li></li>
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||||
</ol>
|
</ol>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="item active">
|
<div class="item active">
|
||||||
|
@ -1456,6 +1464,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div id="myCarousel" class="carousel slide">
|
<div id="myCarousel" class="carousel slide">
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
<!-- Carousel items -->
|
<!-- Carousel items -->
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="active item">…</div>
|
<div class="active item">…</div>
|
||||||
|
@ -1480,14 +1493,14 @@ $('#myCollapsible').on('hidden', function () {
|
||||||
<h2>Usage</h2>
|
<h2>Usage</h2>
|
||||||
|
|
||||||
<h3>Via data attributes</h3>
|
<h3>Via data attributes</h3>
|
||||||
<p>...</p>
|
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.</p>
|
||||||
|
|
||||||
<h3>Via JavaScript</h3>
|
<h3>Via JavaScript</h3>
|
||||||
<p>Call carousel manually with:</p>
|
<p>Call carousel manually with:</p>
|
||||||
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -335,21 +335,21 @@ $('#myModal').on('hidden', function () {
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||||
<li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
|
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -357,11 +357,11 @@ $('#myModal').on('hidden', function () {
|
||||||
<li id="fat-menu" class="dropdown">
|
<li id="fat-menu" class="dropdown">
|
||||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -377,31 +377,31 @@ $('#myModal').on('hidden', function () {
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
|
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
|
||||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
||||||
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||||
<li class="divider"></li>
|
<li role="presentation" class="divider"></li>
|
||||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul> <!-- /tabs -->
|
</ul> <!-- /tabs -->
|
||||||
|
@ -699,17 +699,17 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
||||||
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
|
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
|
||||||
<div class="bs-docs-example tooltip-demo">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
|
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
|
||||||
</p>
|
</p>
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
|
|
||||||
<h3>{{_i}}Four directions{{/i}}</h3>
|
<h3>{{_i}}Four directions{{/i}}</h3>
|
||||||
<div class="bs-docs-example tooltip-demo">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<ul class="bs-docs-tooltip-examples">
|
<ul class="bs-docs-tooltip-examples">
|
||||||
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||||
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||||
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||||
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
|
|
||||||
|
@ -747,7 +747,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}placement{{/i}}</td>
|
<td>{{_i}}placement{{/i}}</td>
|
||||||
<td>{{_i}}string|function{{/i}}</td>
|
<td>{{_i}}string | function{{/i}}</td>
|
||||||
<td>'top'</td>
|
<td>'top'</td>
|
||||||
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
|
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -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>
|
||||||
|
@ -779,6 +779,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{{_i}}container{{/i}}</td>
|
||||||
|
<td>{{_i}}string | false{{/i}}</td>
|
||||||
|
<td>{{_i}}false{{/i}}</td>
|
||||||
|
<td>
|
||||||
|
<p>{{_i}}Appends the tooltip to a specific element <code>container: 'body'</code>{{/i}}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
|
@ -788,7 +796,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
|
|
||||||
<h3>{{_i}}Markup{{/i}}</h3>
|
<h3>{{_i}}Markup{{/i}}</h3>
|
||||||
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums"><a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre>
|
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre>
|
||||||
|
|
||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<h3>{{_i}}Methods{{/i}}</h3>
|
||||||
<h4>$().tooltip({{_i}}options{{/i}})</h4>
|
<h4>$().tooltip({{_i}}options{{/i}})</h4>
|
||||||
|
@ -860,16 +868,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
|
|
||||||
<h3>Live demo</h3>
|
<h3>Live demo</h3>
|
||||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
<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}}Click to toggle popover{{/i}}</a>
|
<a href="#" class="btn btn-large btn-danger" data-toggle="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>
|
</div>
|
||||||
|
|
||||||
<h4>{{_i}}Four directions{{/i}}</h4>
|
<h4>{{_i}}Four directions{{/i}}</h4>
|
||||||
<div class="bs-docs-example tooltip-demo">
|
<div class="bs-docs-example tooltip-demo">
|
||||||
<ul class="bs-docs-tooltip-examples">
|
<ul class="bs-docs-tooltip-examples">
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
|
|
||||||
|
@ -907,7 +915,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}placement{{/i}}</td>
|
<td>{{_i}}placement{{/i}}</td>
|
||||||
<td>{{_i}}string|function{{/i}}</td>
|
<td>{{_i}}string | function{{/i}}</td>
|
||||||
<td>'right'</td>
|
<td>'right'</td>
|
||||||
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
|
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -1353,9 +1361,9 @@ $('#myCollapsible').on('hidden', function () {
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div id="myCarousel" class="carousel slide">
|
<div id="myCarousel" class="carousel slide">
|
||||||
<ol class="carousel-indicators">
|
<ol class="carousel-indicators">
|
||||||
<li class="active"></li>
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||||
<li></li>
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||||
<li></li>
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||||
</ol>
|
</ol>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="item active">
|
<div class="item active">
|
||||||
|
@ -1386,6 +1394,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div id="myCarousel" class="carousel slide">
|
<div id="myCarousel" class="carousel slide">
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||||
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
<!-- {{_i}}Carousel items{{/i}} -->
|
<!-- {{_i}}Carousel items{{/i}} -->
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="active item">…</div>
|
<div class="active item">…</div>
|
||||||
|
@ -1410,14 +1423,14 @@ $('#myCollapsible').on('hidden', function () {
|
||||||
<h2>{{_i}}Usage{{/i}}</h2>
|
<h2>{{_i}}Usage{{/i}}</h2>
|
||||||
|
|
||||||
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
||||||
<p>{{_i}}...{{/i}}</p>
|
<p>{{_i}}Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.{{/i}}</p>
|
||||||
|
|
||||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||||
<p>{{_i}}Call carousel manually with:{{/i}}</p>
|
<p>{{_i}}Call carousel manually with:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
||||||
|
|
||||||
<h3>{{_i}}Options{{/i}}</h3>
|
<h3>{{_i}}Options{{/i}}</h3>
|
||||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
|
<p>{{_i}}Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -188,11 +188,18 @@
|
||||||
/* CAROUSEL DATA-API
|
/* CAROUSEL DATA-API
|
||||||
* ================= */
|
* ================= */
|
||||||
|
|
||||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||||
var $this = $(this), href
|
var $this = $(this), href
|
||||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||||
, options = $.extend({}, $target.data(), $this.data())
|
, options = $.extend({}, $target.data(), $this.data())
|
||||||
|
, slideIndex
|
||||||
|
|
||||||
$target.carousel(options)
|
$target.carousel(options)
|
||||||
|
|
||||||
|
if (slideIndex = $this.attr('data-slide-to')) {
|
||||||
|
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||||
|
}
|
||||||
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -129,7 +129,7 @@
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var $this = $(this)
|
var $this = $(this)
|
||||||
, data = $this.data('collapse')
|
, data = $this.data('collapse')
|
||||||
, options = typeof option == 'object' && option
|
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||||
if (typeof option == 'string') data[option]()
|
if (typeof option == 'string') data[option]()
|
||||||
})
|
})
|
||||||
|
|
|
@ -81,7 +81,10 @@
|
||||||
|
|
||||||
isActive = $parent.hasClass('open')
|
isActive = $parent.hasClass('open')
|
||||||
|
|
||||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||||
|
if (e.which == 27) $parent.find(toggle).focus()
|
||||||
|
return $this.click()
|
||||||
|
}
|
||||||
|
|
||||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||||
|
|
||||||
|
@ -154,7 +157,7 @@
|
||||||
|
|
||||||
$(document)
|
$(document)
|
||||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
||||||
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
.on('click.dropdown.data-api touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||||
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
|
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
|
||||||
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||||
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
, $href = /^#\w/.test(href) && $(href)
|
, $href = /^#\w/.test(href) && $(href)
|
||||||
return ( $href
|
return ( $href
|
||||||
&& $href.length
|
&& $href.length
|
||||||
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
|
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||||
})
|
})
|
||||||
.sort(function (a, b) { return a[0] - b[0] })
|
.sort(function (a, b) { return a[0] - b[0] })
|
||||||
.each(function () {
|
.each(function () {
|
||||||
|
|
|
@ -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 ?
|
||||||
|
@ -102,8 +110,11 @@
|
||||||
, actualHeight
|
, actualHeight
|
||||||
, placement
|
, placement
|
||||||
, tp
|
, tp
|
||||||
|
, e = $.Event('show')
|
||||||
|
|
||||||
if (this.hasContent() && this.enabled) {
|
if (this.hasContent() && this.enabled) {
|
||||||
|
this.$element.trigger(e)
|
||||||
|
if (e.isDefaultPrevented()) return
|
||||||
$tip = this.tip()
|
$tip = this.tip()
|
||||||
this.setContent()
|
this.setContent()
|
||||||
|
|
||||||
|
@ -118,7 +129,8 @@
|
||||||
$tip
|
$tip
|
||||||
.detach()
|
.detach()
|
||||||
.css({ top: 0, left: 0, display: 'block' })
|
.css({ top: 0, left: 0, display: 'block' })
|
||||||
.insertAfter(this.$element)
|
|
||||||
|
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
|
||||||
|
|
||||||
pos = this.getPosition()
|
pos = this.getPosition()
|
||||||
|
|
||||||
|
@ -144,6 +156,8 @@
|
||||||
.offset(tp)
|
.offset(tp)
|
||||||
.addClass(placement)
|
.addClass(placement)
|
||||||
.addClass('in')
|
.addClass('in')
|
||||||
|
|
||||||
|
this.$element.trigger('shown')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -158,6 +172,10 @@
|
||||||
, hide: function () {
|
, hide: function () {
|
||||||
var that = this
|
var that = this
|
||||||
, $tip = this.tip()
|
, $tip = this.tip()
|
||||||
|
, e = $.Event('hide')
|
||||||
|
|
||||||
|
this.$element.trigger(e)
|
||||||
|
if (e.isDefaultPrevented()) return
|
||||||
|
|
||||||
$tip.removeClass('in')
|
$tip.removeClass('in')
|
||||||
|
|
||||||
|
@ -176,6 +194,8 @@
|
||||||
removeWithAnimation() :
|
removeWithAnimation() :
|
||||||
$tip.detach()
|
$tip.detach()
|
||||||
|
|
||||||
|
this.$element.trigger('hidden')
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -234,8 +254,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
, toggle: function (e) {
|
, toggle: function (e) {
|
||||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this
|
||||||
self[self.tip().hasClass('in') ? 'hide' : 'show']()
|
self.tip().hasClass('in') ? self.hide() : self.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
, destroy: function () {
|
, destroy: function () {
|
||||||
|
@ -267,10 +287,11 @@
|
||||||
, 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
|
||||||
|
, container: false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -66,6 +66,83 @@ $(function () {
|
||||||
ok(!$(".tooltip").length, 'tooltip removed')
|
ok(!$(".tooltip").length, 'tooltip removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test("should fire show event", function () {
|
||||||
|
stop()
|
||||||
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
|
.bind("show", function() {
|
||||||
|
ok(true, "show was called")
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
.tooltip('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should fire shown event", function () {
|
||||||
|
stop()
|
||||||
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
|
.bind("shown", function() {
|
||||||
|
ok(true, "shown was called")
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
.tooltip('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should not fire shown event when default prevented", function () {
|
||||||
|
stop()
|
||||||
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
|
.bind("show", function(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
ok(true, "show was called")
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
.bind("shown", function() {
|
||||||
|
ok(false, "shown was called")
|
||||||
|
})
|
||||||
|
.tooltip('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should fire hide event", function () {
|
||||||
|
stop()
|
||||||
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
|
.bind("shown", function() {
|
||||||
|
$(this).tooltip('hide')
|
||||||
|
})
|
||||||
|
.bind("hide", function() {
|
||||||
|
ok(true, "hide was called")
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
.tooltip('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should fire hidden event", function () {
|
||||||
|
stop()
|
||||||
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
|
.bind("shown", function() {
|
||||||
|
$(this).tooltip('hide')
|
||||||
|
})
|
||||||
|
.bind("hidden", function() {
|
||||||
|
ok(true, "hidden was called")
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
.tooltip('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should not fire hidden event when default prevented", function () {
|
||||||
|
stop()
|
||||||
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
|
.bind("shown", function() {
|
||||||
|
$(this).tooltip('hide')
|
||||||
|
})
|
||||||
|
.bind("hide", function(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
ok(true, "hide was called")
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
.bind("hidden", function() {
|
||||||
|
ok(false, "hidden was called")
|
||||||
|
})
|
||||||
|
.tooltip('show')
|
||||||
|
})
|
||||||
|
|
||||||
test("should not show tooltip if leave event occurs before delay expires", function () {
|
test("should not show tooltip if leave event occurs before delay expires", function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
|
@ -156,4 +233,22 @@ $(function () {
|
||||||
div.find('a').trigger('click')
|
div.find('a').trigger('click')
|
||||||
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test("should show tooltip when toggle is called", function () {
|
||||||
|
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
|
||||||
|
.appendTo('#qunit-fixture')
|
||||||
|
.tooltip({trigger: 'manual'})
|
||||||
|
.tooltip('toggle')
|
||||||
|
ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
|
||||||
|
})
|
||||||
|
|
||||||
|
test("should place tooltips inside the body", function () {
|
||||||
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
|
.appendTo('#qunit-fixture')
|
||||||
|
.tooltip({container:'body'})
|
||||||
|
.tooltip('show')
|
||||||
|
ok($("body > .tooltip").length, 'inside the body')
|
||||||
|
ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
|
||||||
|
tooltip.tooltip('hide')
|
||||||
|
})
|
||||||
})
|
})
|
Loading…
Reference in New Issue