diff options
| author | Bernardo Gurgel Filho <[email protected]> | 2015-08-23 01:59:48 -0300 |
|---|---|---|
| committer | Bernardo Gurgel Filho <[email protected]> | 2015-08-26 17:20:01 -0300 |
| commit | 2ae5fdf9ddbff98c55e47b81d7150b8d960ad342 (patch) | |
| tree | 7b4a3a9654bbee6f2c68ba30ed8d94b1fb411c47 | |
| parent | 7ff9b1979c56f8da5eab77c755778e8f9c323526 (diff) | |
| download | bootstrap-2ae5fdf9ddbff98c55e47b81d7150b8d960ad342.tar.xz bootstrap-2ae5fdf9ddbff98c55e47b81d7150b8d960ad342.zip | |
Convert tooltip's arrows to generated CSS content via :before
| -rw-r--r-- | js/src/tooltip.js | 1 | ||||
| -rw-r--r-- | scss/_tooltip.scss | 27 |
2 files changed, 15 insertions, 13 deletions
diff --git a/js/src/tooltip.js b/js/src/tooltip.js index aa5c73945..099a47482 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -28,7 +28,6 @@ const Tooltip = (($) => { const Default = { animation : true, template : '<div class="tooltip" role="tooltip">' - + '<div class="tooltip-arrow"></div>' + '<div class="tooltip-inner"></div></div>', trigger : 'hover focus', title : '', diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 941579ec9..23a18e7de 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -16,10 +16,11 @@ padding: $tooltip-arrow-width 0; margin-top: -3px; - .tooltip-arrow { + .tooltip-inner:before { bottom: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } @@ -29,10 +30,11 @@ padding: 0 $tooltip-arrow-width; margin-left: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; left: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } @@ -42,10 +44,11 @@ padding: $tooltip-arrow-width 0; margin-top: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } @@ -55,10 +58,11 @@ padding: 0 $tooltip-arrow-width; margin-left: -3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; right: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } @@ -73,13 +77,12 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); -} -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + &:before { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } |