Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
@@ -222,12 +222,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
| template |
string |
- '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
+ '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Base HTML to use when creating the popover.
The popover's title will be injected into the .popover-title.
The popover's content will be injected into the .popover-content.
- .arrow will become the popover's arrow.
+ .popover-arrow will become the popover's arrow.
The outermost wrapper element should have the .popover class.
|
diff --git a/js/popover.js b/js/popover.js
index db272bdee4..085584fe87 100644
--- a/js/popover.js
+++ b/js/popover.js
@@ -25,7 +25,7 @@
placement: 'right',
trigger: 'click',
content: '',
- template: '
'
+ template: '
'
})
@@ -50,7 +50,7 @@
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content)
- $tip.removeClass('fade top bottom left right in')
+ $tip.removeClass('fade popover-top popover-bottom popover-left popover-right in')
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
@@ -72,7 +72,7 @@
}
Popover.prototype.arrow = function () {
- return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
+ return (this.$arrow = this.$arrow || this.tip().find('.popover-arrow'))
}
Popover.prototype.tip = function () {
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 466ebace26..8f59d3483a 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -141,7 +141,7 @@ $(function () {
.bootstrapPopover({
title: 'Test',
content: 'Test',
- template: '
'
+ template: '
'
})
$popover.bootstrapPopover('show')
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index eb578c22af..6232ccdcb3 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -85,7 +85,7 @@ $(function () {
.bootstrapTooltip({ placement: 'bottom' })
$tooltip.bootstrapTooltip('show')
- ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+ ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
$tooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed')
@@ -300,8 +300,8 @@ $(function () {
test('should add position class before positioning so that position-specific styles are taken into account', function () {
var styles = ''
var $styles = $(styles).appendTo('head')
@@ -384,7 +384,7 @@ $(function () {
.bootstrapTooltip({ placement: 'auto' })
$topTooltip.bootstrapTooltip('show')
- ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+ ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
$topTooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom')
@@ -394,7 +394,7 @@ $(function () {
.bootstrapTooltip({ placement: 'right auto' })
$rightTooltip.bootstrapTooltip('show')
- ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
+ ok($('.tooltip').is('.tooltip-left'), 'right positioned tooltip is dynamically positioned left')
$rightTooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom')
@@ -404,7 +404,7 @@ $(function () {
.bootstrapTooltip({ placement: 'auto left' })
$leftTooltip.bootstrapTooltip('show')
- ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
+ ok($('.tooltip').is('.tooltip-right'), 'left positioned tooltip is dynamically positioned right')
$leftTooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom')
@@ -430,7 +430,7 @@ $(function () {
})
$target.bootstrapTooltip('show')
- ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
+ ok($('.tooltip').is('.tooltip-top'), 'top positioned tooltip is dynamically positioned to top')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -455,7 +455,7 @@ $(function () {
})
$target.bootstrapTooltip('show')
- ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+ ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -481,7 +481,7 @@ $(function () {
$('#scrollable-div').scrollTop(100)
$target.bootstrapTooltip('show')
- ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
+ ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -507,7 +507,7 @@ $(function () {
$('#scrollable-div').scrollTop(200)
$target.bootstrapTooltip('show')
- ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+ ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -537,7 +537,7 @@ $(function () {
$('#scrollable-div').scrollTop(200)
$target.bootstrapTooltip('show')
- ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+ ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -563,7 +563,7 @@ $(function () {
$('#scrollable-div').scrollTop(400)
$target.bootstrapTooltip('show')
- ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
+ ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
diff --git a/js/tooltip.js b/js/tooltip.js
index bd376f7727..9d3074cc04 100644
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -177,7 +177,7 @@
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
- .addClass(placement)
+ .addClass(this.type + '-' + placement)
.data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
@@ -187,7 +187,7 @@
var actualHeight = $tip[0].offsetHeight
if (autoPlace) {
- var orgPlacement = placement
+ var origPlacement = placement
var $container = this.options.container ? $(this.options.container) : this.$element.parent()
var containerDim = this.getPosition($container)
@@ -198,8 +198,8 @@
placement
$tip
- .removeClass(orgPlacement)
- .addClass(placement)
+ .removeClass(this.type + '-' + origPlacement)
+ .addClass(this.type + '-' + placement)
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
@@ -283,7 +283,7 @@
var title = this.getTitle()
$tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
- $tip.removeClass('fade in top bottom left right')
+ $tip.removeClass('fade in tooltip-top tooltip-bottom tooltip-left tooltip-right')
}
Tooltip.prototype.hide = function (callback) {
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 63928a4fce..a614518c7f 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -24,14 +24,14 @@
border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
-
- // Offset the popover to account for the popover arrow
- &.top { margin-top: -$popover-arrow-width; }
- &.right { margin-left: $popover-arrow-width; }
- &.bottom { margin-top: $popover-arrow-width; }
- &.left { margin-left: -$popover-arrow-width; }
}
+// Offset the popover to account for the popover arrow
+.popover-top { margin-top: -$popover-arrow-width; }
+.popover-right { margin-left: $popover-arrow-width; }
+.popover-bottom { margin-top: $popover-arrow-width; }
+.popover-left { margin-left: -$popover-arrow-width; }
+
.popover-title {
padding: 8px 14px;
margin: 0; // reset heading margin
@@ -47,9 +47,9 @@
// Arrows
//
-// .arrow is outer, .arrow:after is inner
+// .popover-arrow is outer, .popover-arrow:after is inner
-.popover > .arrow {
+.popover-arrow {
&,
&:after {
position: absolute;
@@ -60,70 +60,68 @@
border-style: solid;
}
}
-.popover > .arrow {
+.popover-arrow {
border-width: $popover-arrow-outer-width;
}
-.popover > .arrow:after {
+.popover-arrow:after {
content: "";
border-width: $popover-arrow-width;
}
-.popover {
- &.top > .arrow {
- bottom: -$popover-arrow-outer-width;
- left: 50%;
- margin-left: -$popover-arrow-outer-width;
- border-top-color: $popover-arrow-outer-color;
+.popover-top > .popover-arrow {
+ bottom: -$popover-arrow-outer-width;
+ left: 50%;
+ margin-left: -$popover-arrow-outer-width;
+ border-top-color: $popover-arrow-outer-color;
+ border-bottom-width: 0;
+ &:after {
+ bottom: 1px;
+ margin-left: -$popover-arrow-width;
+ content: "";
+ border-top-color: $popover-arrow-color;
border-bottom-width: 0;
- &:after {
- bottom: 1px;
- margin-left: -$popover-arrow-width;
- content: "";
- border-top-color: $popover-arrow-color;
- border-bottom-width: 0;
- }
- }
- &.right > .arrow {
- top: 50%;
- left: -$popover-arrow-outer-width;
- margin-top: -$popover-arrow-outer-width;
- border-right-color: $popover-arrow-outer-color;
- border-left-width: 0;
- &:after {
- bottom: -$popover-arrow-width;
- left: 1px;
- content: "";
- border-right-color: $popover-arrow-color;
- border-left-width: 0;
- }
- }
- &.bottom > .arrow {
- top: -$popover-arrow-outer-width;
- left: 50%;
- margin-left: -$popover-arrow-outer-width;
- border-top-width: 0;
- border-bottom-color: $popover-arrow-outer-color;
- &:after {
- top: 1px;
- margin-left: -$popover-arrow-width;
- content: "";
- border-top-width: 0;
- border-bottom-color: $popover-arrow-color;
- }
- }
-
- &.left > .arrow {
- top: 50%;
- right: -$popover-arrow-outer-width;
- margin-top: -$popover-arrow-outer-width;
- border-right-width: 0;
- border-left-color: $popover-arrow-outer-color;
- &:after {
- right: 1px;
- bottom: -$popover-arrow-width;
- content: "";
- border-right-width: 0;
- border-left-color: $popover-arrow-color;
- }
+ }
+}
+.popover-right > .popover-arrow {
+ top: 50%;
+ left: -$popover-arrow-outer-width;
+ margin-top: -$popover-arrow-outer-width;
+ border-right-color: $popover-arrow-outer-color;
+ border-left-width: 0;
+ &:after {
+ bottom: -$popover-arrow-width;
+ left: 1px;
+ content: "";
+ border-right-color: $popover-arrow-color;
+ border-left-width: 0;
+ }
+}
+.popover-bottom > .popover-arrow {
+ top: -$popover-arrow-outer-width;
+ left: 50%;
+ margin-left: -$popover-arrow-outer-width;
+ border-top-width: 0;
+ border-bottom-color: $popover-arrow-outer-color;
+ &:after {
+ top: 1px;
+ margin-left: -$popover-arrow-width;
+ content: "";
+ border-top-width: 0;
+ border-bottom-color: $popover-arrow-color;
+ }
+}
+
+.popover-left > .popover-arrow {
+ top: 50%;
+ right: -$popover-arrow-outer-width;
+ margin-top: -$popover-arrow-outer-width;
+ border-right-width: 0;
+ border-left-color: $popover-arrow-outer-color;
+ &:after {
+ right: 1px;
+ bottom: -$popover-arrow-width;
+ content: "";
+ border-right-width: 0;
+ border-left-color: $popover-arrow-color;
}
}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index b1e3f4666c..49af2b2881 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -17,26 +17,23 @@
opacity: 0;
&.in { opacity: $tooltip-opacity; }
+}
- &.top {
- padding: $tooltip-arrow-width 0;
- margin-top: -3px;
- }
-
- &.right {
- padding: 0 $tooltip-arrow-width;
- margin-left: 3px;
- }
-
- &.bottom {
- padding: $tooltip-arrow-width 0;
- margin-top: 3px;
- }
-
- &.left {
- padding: 0 $tooltip-arrow-width;
- margin-left: -3px;
- }
+.tooltip-top {
+ padding: $tooltip-arrow-width 0;
+ margin-top: -3px;
+}
+.tooltip-right {
+ padding: 0 $tooltip-arrow-width;
+ margin-left: 3px;
+}
+.tooltip-bottom {
+ padding: $tooltip-arrow-width 0;
+ margin-top: 3px;
+}
+.tooltip-left {
+ padding: 0 $tooltip-arrow-width;
+ margin-left: -3px;
}
// Wrapper for the tooltip content
@@ -58,33 +55,31 @@
border-color: transparent;
border-style: solid;
}
-.tooltip {
- &.top .tooltip-arrow {
- bottom: 0;
- left: 50%;
- margin-left: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
- border-top-color: $tooltip-arrow-color;
- }
- &.right .tooltip-arrow {
- top: 50%;
- left: 0;
- margin-top: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
- border-right-color: $tooltip-arrow-color;
- }
- &.left .tooltip-arrow {
- top: 50%;
- right: 0;
- margin-top: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
- border-left-color: $tooltip-arrow-color;
- }
- &.bottom .tooltip-arrow {
- top: 0;
- left: 50%;
- margin-left: -$tooltip-arrow-width;
- border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
- border-bottom-color: $tooltip-arrow-color;
- }
+.tooltip-top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-top-color: $tooltip-arrow-color;
+}
+.tooltip-right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-right-color: $tooltip-arrow-color;
+}
+.tooltip-left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-left-color: $tooltip-arrow-color;
+}
+.tooltip-bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -$tooltip-arrow-width;
+ border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-bottom-color: $tooltip-arrow-color;
}