Here are some tooltip examples
Lorem ipsum default tooltip Here is the tooltip text odor amet, consectetuer adipiscing elit. Up tooltip Here is the tooltip text elementum interdum mi Bottom tooltip Here is the tooltip text
smus tincidunt. Sodales massa nulla faucibus leo diam pulvinar? Nec hac feugiat sociosqu magna duis blandit urna left tooltip Here is the tooltip text enim. Tortor lobortis aptent nisl a ultricies donec. right tooltip Here is the tooltip text Dignissim velit nisi leo fusce eleifend auct
<button class="button" data-tooltip="Hello! I am a tooltip text">Hover me</button>or
<span class="tooltip">
default tooltip
<span class="tooltip-content">Here is the tooltip text</span>
</span>For directional tooltips use class tooltip-up, tooltip-bottom, tooltip-left and tooltip-right. For example -
<span class="tooltip tooltip-up">
Up tooltip
<span class="tooltip-content">Here is the tooltip text</span>
</span>$tooltip-padding: rem(5) rem(10) !default;
$tooltip-padding-large: rem(15) !default;
$tooltip-transition-duration: 150ms !default;
$tooltip-transition-delay: 250ms !default;
--r-tooltip-bg-color: var(--r-color-dark);
--r-tooltip-text-color: var(--r-color-white);
--r-tooltip-padding: #{$tooltip-padding};
--r-tooltip-padding-large: #{$tooltip-padding-large};
--r-tooltip-border-radius: var(--r-global-border-radius);
--r-tooltip-transition-duration: #{$tooltip-transition-duration};
--r-tooltip-transition-delay: #{$tooltip-transition-delay};
--r-tooltip-border-color: var(--r-color-tertiary);
--r-tooltip-content-btn-bg-color: var(--r-color-tertiary);