.js-tips-tip {
--tip-em: 12px;
--tip-fill-color: #666;
--tip-text-color: #fff;
--stem-size: var(--tip-em);
--stem-size-wide-half: calc(var(--tip-em) * 1.5 / 2);
--tip-max-width: calc(var(--tip-em) * 18);
--tip-toggle-duration: 0.2s;
--tip-z-index: 9999;
left: 0;
position: absolute;
top: 0;
opacity: 0;
transition: opacity var(--tip-toggle-duration);
z-index: var(--tip-z-index);
}
.js-tips-hidden {
display: none;
}
.js-tips-visible {
opacity: 1;
display: block;
}
.js-tips-inner {
position: relative;
max-width: var(--tip-max-width);
}
.js-tips-stem {
background: none;
border: 0 solid transparent;
height: 0;
position: absolute;
width: 0;
}
.js-tips-tip.js-tips-left .js-tips-stem,
.js-tips-tip.js-tips-left.js-tips-snap-y-side .js-tips-stem {
border-left-width: var(--stem-size);
left: auto;
margin-bottom: auto;
margin-right: calc(var(--stem-size) * -1);
margin-top: auto;
right: -1px;
border-color: transparent;
border-left-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-right .js-tips-stem,
.js-tips-tip.js-tips-right.js-tips-snap-y-side .js-tips-stem {
border-right-width: var(--stem-size);
left: 0;
margin-bottom: auto;
margin-left: calc(var(--stem-size) * -1);
margin-top: auto;
right: auto;
border-color: transparent;
border-right-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-bottom .js-tips-stem,
.js-tips-tip.js-tips-bottom.js-tips-snap-x-side .js-tips-stem {
border-bottom-width: var(--stem-size);
bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: calc(var(--stem-size) * -1);
top: 0;
border-color: transparent;
border-bottom-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-top .js-tips-stem,
.js-tips-tip.js-tips-top.js-tips-snap-x-side .js-tips-stem {
border-top-width: var(--stem-size);
bottom: 0;
margin-bottom: calc(var(--stem-size) * -1);
margin-left: auto;
margin-right: auto;
top: auto;
border-color: transparent;
border-top-color: var(--tip-fill-color);
}
.js-tips-tip.js-tips-snap-x-side > .js-tips-inner > .js-tips-stem {
border-left-width: var(--stem-size-wide-half);
border-right-width: var(--stem-size-wide-half);
left: 50%;
margin-left: calc(var(--stem-size-wide-half) * -1);
margin-right: auto;
}
.js-tips-tip.js-tips-snap-y-side > .js-tips-inner > .js-tips-stem {
border-top-width: var(--stem-size-wide-half);
border-bottom-width: var(--stem-size-wide-half);
margin-bottom: auto;
margin-top: calc(var(--stem-size-wide-half) * -1);
top: 50%;
}
.js-tips-content {
overflow: hidden;
position: relative;
padding-bottom: calc(var(--tip-em) * 5 / 6);
padding-left: var(--tip-em);
padding-right: var(--tip-em);
padding-top: calc(var(--tip-em) * 2 / 3);
background-color: var(--tip-fill-color);
color: var(--tip-text-color);
transition-duration: var(--tip-toggle-duration);
transition-property: height width;
transition-timing-function: ease-in-out;
}
HLF Tip Extension
Source | Tests
The main responsibility for the required extension styling is to provide core layout styles but allow easy customization of skin styles, ie. colors, fonts, borders, shadows.
The required DOM structure looks like:
<div class="js-tips-tip"> <div class="js-tips-inner"> <div class="js-tips-stem"></div> <div class="js-tips-content">...</div> </div> </div>Example of the variations of classes on the tip element:
<div class="js-tips js-snap-tip js-tips-follow js-tips-bottom js-tips-right js-tips-snap-trigger js-tips-snap-x-side">