Commit 330b143b authored by Mark Otto's avatar Mark Otto

Add longer tooltip example to docs, tighten up line-height on tooltip; run make

parent 9749d6af
...@@ -5216,6 +5216,7 @@ input[type="submit"].btn.btn-mini { ...@@ -5216,6 +5216,7 @@ input[type="submit"].btn.btn-mini {
display: block; display: block;
padding: 5px; padding: 5px;
font-size: 11px; font-size: 11px;
line-height: 1.4;
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
visibility: visible; visibility: visible;
...@@ -5244,7 +5245,7 @@ input[type="submit"].btn.btn-mini { ...@@ -5244,7 +5245,7 @@ input[type="submit"].btn.btn-mini {
.tooltip-inner { .tooltip-inner {
max-width: 200px; max-width: 200px;
padding: 3px 8px; padding: 8px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
......
...@@ -157,7 +157,7 @@ ...@@ -157,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)
......
...@@ -110,8 +110,11 @@ ...@@ -110,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()
...@@ -126,7 +129,8 @@ ...@@ -126,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()
...@@ -152,6 +156,8 @@ ...@@ -152,6 +156,8 @@
.offset(tp) .offset(tp)
.addClass(placement) .addClass(placement)
.addClass('in') .addClass('in')
this.$element.trigger('shown')
} }
} }
...@@ -166,6 +172,10 @@ ...@@ -166,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')
...@@ -184,6 +194,8 @@ ...@@ -184,6 +194,8 @@
removeWithAnimation() : removeWithAnimation() :
$tip.detach() $tip.detach()
this.$element.trigger('hidden')
return this return this
} }
...@@ -242,8 +254,8 @@ ...@@ -242,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 () {
...@@ -279,6 +291,7 @@ ...@@ -279,6 +291,7 @@
, title: '' , title: ''
, delay: 0 , delay: 0
, html: false , html: false
, container: false
} }
...@@ -290,4 +303,4 @@ ...@@ -290,4 +303,4 @@
return this return this
} }
}(window.jQuery); }(window.jQuery);
\ No newline at end of file
...@@ -789,7 +789,7 @@ ...@@ -789,7 +789,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)
...@@ -1150,8 +1150,11 @@ ...@@ -1150,8 +1150,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()
...@@ -1166,7 +1169,8 @@ ...@@ -1166,7 +1169,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()
...@@ -1192,6 +1196,8 @@ ...@@ -1192,6 +1196,8 @@
.offset(tp) .offset(tp)
.addClass(placement) .addClass(placement)
.addClass('in') .addClass('in')
this.$element.trigger('shown')
} }
} }
...@@ -1206,6 +1212,10 @@ ...@@ -1206,6 +1212,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')
...@@ -1224,6 +1234,8 @@ ...@@ -1224,6 +1234,8 @@
removeWithAnimation() : removeWithAnimation() :
$tip.detach() $tip.detach()
this.$element.trigger('hidden')
return this return this
} }
...@@ -1282,8 +1294,8 @@ ...@@ -1282,8 +1294,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 () {
...@@ -1319,6 +1331,7 @@ ...@@ -1319,6 +1331,7 @@
, title: '' , title: ''
, delay: 0 , delay: 0
, html: false , html: false
, container: false
} }
...@@ -1330,7 +1343,8 @@ ...@@ -1330,7 +1343,8 @@
return this return this
} }
}(window.jQuery);/* =========================================================== }(window.jQuery);
/* ===========================================================
* bootstrap-popover.js v2.3.0 * bootstrap-popover.js v2.3.0
* http://twitter.github.com/bootstrap/javascript.html#popovers * http://twitter.github.com/bootstrap/javascript.html#popovers
* =========================================================== * ===========================================================
......
This diff is collapsed.
...@@ -769,7 +769,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -769,7 +769,7 @@ $('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="#" 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 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="A much longer tooltip belongs right here to demonstrate the max-width we apply.">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>
...@@ -817,7 +817,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -817,7 +817,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr> </tr>
<tr> <tr>
<td>placement</td> <td>placement</td>
<td>string|function</td> <td>string | function</td>
<td>'top'</td> <td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right</td> <td>how to position the tooltip - top | bottom | left | right</td>
</tr> </tr>
...@@ -985,7 +985,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -985,7 +985,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr> </tr>
<tr> <tr>
<td>placement</td> <td>placement</td>
<td>string|function</td> <td>string | function</td>
<td>'right'</td> <td>'right'</td>
<td>how to position the popover - top | bottom | left | right</td> <td>how to position the popover - top | bottom | left | right</td>
</tr> </tr>
......
...@@ -699,7 +699,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -699,7 +699,7 @@ $('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="#" 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 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="A much longer tooltip belongs right here to demonstrate the max-width we apply.">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 }}
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
visibility: visible; visibility: visible;
padding: 5px; padding: 5px;
font-size: 11px; font-size: 11px;
line-height: 1.4;
.opacity(0); .opacity(0);
&.in { .opacity(80); } &.in { .opacity(80); }
&.top { margin-top: -3px; } &.top { margin-top: -3px; }
...@@ -22,7 +23,7 @@ ...@@ -22,7 +23,7 @@
// Wrapper for the tooltip content // Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: 200px; max-width: 200px;
padding: 3px 8px; padding: 8px;
color: @tooltipColor; color: @tooltipColor;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
......
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