Tooltip¶
Use tooltip element for rendering a tooltip anywhere on the page. Tooltip element uses the message mixins for additional styling.
Example¶
Storefront theme provides predefined stylings for one tooltip that you can position however you want. Find out more about h-tooltip webcomponent here.
Tooltip tags¶
The .tooltip and .tooltip__content classes where designed to be used with <h-tooltip> and <h-tooltip-content> webcomponents. However, you can use them with any element you want. Eg. <div> or <span>. You should remember to add appropriate attribute to such elements (role="tooltip" and inert or tabindex="0") to tell assistive technologies such as screen readers what purpose the element serves.
Directions¶
If you have read the h-tooltip webcomponent documentation you know that the tooltip can be positioned in a variety of different ways. We have an arrow styled for every position differently which is included in a stylesheet. Keep in mind that positions top, bottom, left and right have a prefix center automatically added to them so they become center-top, center-bottom etc. Find out more about modifying the position of the arrows yourself in the section below. Here are the styles of the arrows:
&[direction='top-left']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
.pixel-to-rem(left, @tooltipHorizontalDistanceFromSide);
}
&[direction='top-center']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='top-right']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
.pixel-to-rem(right, @tooltipHorizontalDistanceFromSide);
}
&[direction='bottom-left']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
.pixel-to-rem(left, @tooltipHorizontalDistanceFromSide);
}
&[direction='bottom-center']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);;
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='bottom-right']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
.pixel-to-rem(right, @tooltipHorizontalDistanceFromSide);
}
&[direction='left-top']:before {
.pixel-to-rem(top, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(right, @tooltipArrowOffset * -1);
}
&[direction='left-center']:before {
top: 50%;
.pixel-to-rem(right, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
&[direction='left-bottom']:before {
.pixel-to-rem(bottom, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(right, @tooltipArrowOffset * -1);
}
&[direction='right-top']:before {
.pixel-to-rem(top, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(left, @tooltipArrowOffset * -1);
}
&[direction='right-center']:before {
top: 50%;
.pixel-to-rem(left, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
&[direction='right-bottom']:before {
.pixel-to-rem(bottom, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(left, @tooltipArrowOffset * -1);
}
&[direction='center-top']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='center-right']:before {
top: 50%;
.pixel-to-rem(left, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
&[direction='center-bottom']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='center-left']:before {
top: 50%;
.pixel-to-rem(right, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
LESS¶
You can modify any tooltip less variable in your User Less section to change tooltip styles.
Tooltips variables¶
Variables used to style tooltips.
@tooltipContentBackgroundColor: @neutralColors0;
@tooltipContentBoxShadow: @shadowL;
@tooltipContentPadding: 12;
@tooltipArrowSize: 16;
@tooltipArrowOffset: @tooltipArrowSize / 2;
@tooltipHorizontalDistanceFromSide: 24;
@tooltipVerticalDistanceFromSide: 12;
If you want to change tooltip styles, you can just change the variables. To change default background-color just modify @tooltipContentBackgroundColor variable.
Tooltip standard styles¶
Here are default tooltip styles:
.tooltip {
width: fit-content;
.message-decorate();
&__content {
max-width: @messageContentMaxWidth;
display: block;
background-color: @tooltipContentBackgroundColor;
box-shadow: @tooltipContentBoxShadow;
.pixel-to-rem(padding, @tooltipContentPadding);
&:before {
content: '';
.pixel-to-rem(width, @tooltipArrowSize);
.pixel-to-rem(height, @tooltipArrowSize);
display: block;
position: absolute;
transform: rotate(45deg);
box-shadow: @tooltipContentBoxShadow;
background-color: @tooltipContentBackgroundColor;
}
&[direction='top-left']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
.pixel-to-rem(left, @tooltipHorizontalDistanceFromSide);
}
&[direction='top-center']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='top-right']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
.pixel-to-rem(right, @tooltipHorizontalDistanceFromSide);
}
&[direction='bottom-left']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
.pixel-to-rem(left, @tooltipHorizontalDistanceFromSide);
}
&[direction='bottom-center']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='bottom-right']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
.pixel-to-rem(right, @tooltipHorizontalDistanceFromSide);
}
&[direction='left-top']:before {
.pixel-to-rem(top, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(right, @tooltipArrowOffset * -1);
}
&[direction='left-center']:before {
top: 50%;
.pixel-to-rem(right, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
&[direction='left-bottom']:before {
.pixel-to-rem(bottom, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(right, @tooltipArrowOffset * -1);
}
&[direction='right-top']:before {
.pixel-to-rem(top, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(left, @tooltipArrowOffset * -1);
}
&[direction='right-center']:before {
top: 50%;
.pixel-to-rem(left, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
&[direction='right-bottom']:before {
.pixel-to-rem(bottom, @tooltipVerticalDistanceFromSide);
.pixel-to-rem(left, @tooltipArrowOffset * -1);
}
&[direction='center-top']:before {
.pixel-to-rem(bottom, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='center-right']:before {
top: 50%;
.pixel-to-rem(left, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
&[direction='center-bottom']:before {
.pixel-to-rem(top, @tooltipArrowOffset * -1);
left: 50%;
transform: rotate(45deg) translate(-50%, 50%);
}
&[direction='center-left']:before {
top: 50%;
.pixel-to-rem(right, @tooltipArrowOffset * -1);
transform: rotate(45deg) translate(-50%, -50%);
}
}
}
h-tooltip-content {
display: none;
}