<div class="container">
<p>Hover over the button to see the tooltip</p>
<p>
<button type="button" class="btn btn-primary tabula-tooltip" data-title="Here's my tooltip content">Hey, you!</button>
</p>
</div>
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: 0.9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
@zindex-tooltip: 1070;
@border-radius-base: 0px;
@font-size-base: 14px;
@font-size-small: ceil((@font-size-base * .85)); // ~12px
@font-family-base: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@line-height-base: 1.6;
.reset-text() {
font-family: @font-family-base;
// We deliberately do NOT reset font-size.
font-style: normal;
font-weight: 400;
line-height: @line-height-base;
line-break: auto;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
}
// Wrapper for the tooltip content
.tooltip-inner() {
max-width: @tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
}
.tabula-tooltip[data-title]:not([data-title=""]) {
position: relative;
display: inline-block;
&::before,
&::after {
position: absolute;
display: block;
top: -@tooltip-arrow-width;
left: 50%;
z-index: @zindex-tooltip;
opacity: 0;
transition: opacity 0.15s linear;
}
&::before {
content: "";
transform: translateX(-50%);
border-width: @tooltip-arrow-width @tooltip-arrow-width 0
@tooltip-arrow-width;
border-style: solid;
border-color: @tooltip-bg transparent transparent transparent;
}
&::after {
content: attr(data-title);
transform: translateX(-50%) translateY(-100%);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: @font-size-small;
.tooltip-inner();
min-width: 150px;
pointer-events: none;
}
&:hover {
&::before,
&::after {
opacity: @tooltip-opacity;
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.