Tooltip component bug found and dealt with
This commit is contained in:
parent
492ec55be4
commit
63bd62686b
5 changed files with 18 additions and 6 deletions
2
dist/mini-default.css
vendored
2
dist/mini-default.css
vendored
|
@ -1418,7 +1418,7 @@ mark {
|
|||
content: '';
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
left: calc(50% - $tooltip-tail-size); }
|
||||
left: calc(50% - 6px); }
|
||||
.tooltip:not(.bottom):before {
|
||||
border-top-color: #212121; }
|
||||
.tooltip.bottom:before {
|
||||
|
|
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -781,3 +781,7 @@
|
|||
- Added proper `tooltip` in the `default` flavor. Size now is `6.81KB`. Implementation of issue #41 is now completed.
|
||||
- `DEVLOG.md` cleanup to make Markdown great again...
|
||||
- Played with **hugging cat** to prepare it for the update.
|
||||
|
||||
## 20170127
|
||||
|
||||
- `tooltip` updated, dealing with a small misalignment bug in alterante styles.
|
||||
|
|
|
@ -152,8 +152,16 @@
|
|||
<li>File</li>
|
||||
</ul>
|
||||
</div>
|
||||
<style>
|
||||
.tooltip:before, .tooltip:after {
|
||||
opacity: 1 !important;
|
||||
clip: auto !important;
|
||||
-webkit-clip-path: inset(0%) !important;
|
||||
clip-path: inset(0%) !important;
|
||||
}
|
||||
}</style>
|
||||
<div class="col-md-offset-1">
|
||||
<mark class="tooltip test" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
|
||||
<mark class="tooltip large" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -226,7 +226,7 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
|||
content: '';
|
||||
background: transparent;
|
||||
border: $tooltip-tail-size solid transparent;
|
||||
left: calc(50% - $tooltip-tail-size);
|
||||
left: calc(50% - #{$tooltip-tail-size});
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-back-color;
|
||||
|
@ -298,8 +298,8 @@ $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
|||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
&:before {
|
||||
border-width: $tooltip-tail-size;
|
||||
left: calc(50% - $tooltip-alt-tail-size);
|
||||
border-width: $tooltip-alt-tail-size;
|
||||
left: calc(50% - #{$tooltip-alt-tail-size});
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 2 * $tooltip-alt-tail-size;
|
||||
|
|
Loading…
Reference in a new issue