HTML
<div class="popover-container popover-high-contrast popover-bottom tooltip"> <div class="tooltip-trigger-wrapper"> <button class="sb-tooltip-trigger" type="button" aria-labelledby="tooltip-:r1:"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path > <path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path > </svg> </button> </div> <span aria-hidden="true" id="tooltip-1" role="tooltip" class="popover"> <span class="popover-content tooltip-content"> Occasionally, services are updated in a specified time window to ensure no down time for customers.</span> <span class="popover-caret"></span> </span> </div>
CSS
Modifiers

Typography

When a user hovers overs a breadcrumb, the breadcrumb link should be underlined.

Element Font-size (px/rem) Font-weight Margin-Left Height
Link 18 / 1.125 Regular / 400 10px / 0.625 32 / 2