');content:"";width:10px;height:10px;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;box-shadow:none}.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}.bx--text-truncate--end,.bx--text-truncate--front{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bx--text-truncate--front{direction:rtl}div[class*=page-header]{--height:15rem}.paragraph{font-size:1rem;font-weight:400;line-height:1.5rem;letter-spacing:0;margin-bottom:1.5rem;padding-right:2rem}.paragraph--responsive{margin-left:-1rem;padding-left:1rem}@media (min-width:42rem){.paragraph--responsive{width:75%}}@media (min-width:66rem){.paragraph--responsive{width:66.667%}}.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:100%}@media (min-width:42rem){.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:75%}}@media (min-width:66rem){.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:66.667%}}.page-h1{margin-top:6rem;margin-bottom:1rem;font-size:2rem;font-weight:400;line-height:125%;letter-spacing:0;font-size:calc(2rem + 0.25*(100vw - 20rem)/22)}@media (min-width:42rem){.page-h1{font-size:2.25rem;line-height:122%;font-size:calc(2.25rem + 0.375*(100vw - 42rem)/24)}}@media (min-width:66rem){.page-h1{font-size:2.625rem;line-height:119%;font-size:calc(2.625rem + 0.375*(100vw - 66rem)/16)}}@media (min-width:82rem){.page-h1{font-size:3rem;line-height:117%;font-size:calc(3rem + 0.75*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h1{font-size:3.75rem}}.page-h2{margin-top:5rem;margin-bottom:1rem;font-size:1.75rem;font-weight:400;line-height:129%;letter-spacing:0;font-size:calc(1.75rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.page-h2{font-size:1.75rem;line-height:125%;font-size:calc(1.75rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h2{font-size:2rem}}.page-h3{margin-top:4rem;margin-bottom:1rem;font-size:1.25rem;font-weight:400;line-height:130%;letter-spacing:0;font-size:calc(1.25rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.page-h3{font-size:1.25rem;line-height:125%;font-size:calc(1.25rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h3{font-size:1.5rem}}.page-h4{font-size:1rem;line-height:1.375rem;letter-spacing:0}.page-h4,.page-h5,.page-h6{margin-top:.75rem;font-weight:600}.page-h5,.page-h6{font-size:.875rem;line-height:1.125rem;letter-spacing:.16px}.container .gatsby-resp-image-wrapper{background:#fff}.image--fixed{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}.image--fixed span.gatsby-resp-image-wrapper{background:#fff;display:flex!important;align-items:center;justify-content:center;margin-right:0!important;width:70%!important;max-width:100%!important}.image--fixed img.gatsby-resp-image-image{max-width:736px;width:736px!important;height:auto!important;position:relative!important}.homepage--dots{position:fixed;z-index:1;width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='white' width='1' height='1'/%3E%3C/svg%3E");background-size:16px;opacity:.35}.container--homepage div[class*=Callout-module--grid],.container--homepage div[class*=Main-module--main],.container--homepage div[class*=NextPrevious-module--wrapper]{position:relative;z-index:2}.homepage--header{height:0;overflow:hidden;padding-top:100%;position:relative}@media (min-width:42rem){.homepage--header{padding-top:50%}}@media (min-width:66rem){.homepage--header{padding:0;height:560px}}.homepage--header .bx--grid,.homepage--header .bx--row{height:100%}.homepage--tile-header{display:flex;align-items:flex-end;margin-top:-50%;padding-left:0;padding-right:0}@media (min-width:42rem){.homepage--tile-header{padding-left:1rem;padding-right:1rem}}@media (min-width:66rem){.homepage--tile-header{margin-top:0}}.homepage--tile-header .bx--aspect-ratio--2x1{padding-bottom:100%}@media (min-width:42rem){.homepage--tile-header .bx--aspect-ratio--2x1{padding-bottom:50%}}.homepage--tile-header .bx--resource-card{width:100%}.homepage-feature{margin-top:3rem}.homepage-feature .bx--feature-card__img{padding-bottom:50%}@media (min-width:42rem){.homepage-feature .bx--feature-card__img{padding-bottom:0}}.bx--header .algolia-autocomplete{height:3rem}.bx--header .algolia-autocomplete .ds-dropdown-menu{margin-top:0}.component-example .bx--link,.page-content .bx--breadcrumb .bx--link{font-size:.875rem}.component-example .button .bx--btn{margin:.5rem}.component-example__live.component-example__live--notification .component-example__live--rendered>div{display:flex;flex-direction:column;align-items:flex-start}.component-example .bx--inline-notification{display:inline-flex}.component-example .loading .bx--loading-overlay{position:absolute}.component-example .bx--form-item,.component-example__live .bx--form-item{margin-bottom:2rem}.component-example .bx--form-item.bx--checkbox-wrapper{margin-bottom:.5rem}.component-example__live--tabs .bx--tabs__nav{position:static}.component-example__live .tabs .bx--tabs+div{margin-top:2rem}.component-example__live--tile .bx--grid{outline:1px dashed #97c1ff}.component-example__live--tile .bx--tile-container .bx--col{background:none;margin-bottom:1rem}.component-example .flatpickr-calendar{margin-left:-1rem;margin-top:-1rem}.component-example__live .bx--tooltip{margin-left:-1rem;margin-top:-.5rem}.component-example__live.component-example__live--modal .bx--modal{z-index:10000}.component-example__live .bx--progress .bx--tooltip{margin-left:1.375rem;margin-top:2.5rem}.code-example{display:flex;flex-direction:column;position:relative;max-width:100%;background:#171717}.code-example code[class*=language-],.code-example pre[class*=language-]{background:#171717;color:#fff}.code-example code[class*=language-]{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px}.code-example pre[class*=language-]{padding-top:0;border:none;box-shadow:none}.code-example__copy-btn{height:2rem;width:2rem;position:absolute;top:.5rem;right:.5rem;color:transparent;cursor:pointer;z-index:20;background:#171717;-webkit-transition:background .11s;transition:background .11s}.code-example__copy-btn:hover{background:#353535}.code-example__copy-btn:focus{outline:1px solid #0062ff;background:#171717}.code-example__copy-btn:hover svg{fill:#fff}.code-example__copy-btn svg{position:absolute;top:.5rem;left:.5rem;fill:#fff}.code-title{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px;display:block;margin-bottom:1rem}.code-example__raw-html{background:#171717;color:#fff;margin:0 1rem;padding:1rem 0;max-height:12rem;min-height:7rem;height:auto;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden;-webkit-transition:.11s;transition:.11s;border-bottom:1px solid #3d3d3d}.code-example__raw-html--expanded{max-height:100rem}.code-example__expand-container{display:flex;justify-content:flex-end;height:3rem;width:100%;background-color:#171717}.code-example__expand{color:#fff;background-color:#171717;border:none;padding:1rem 1rem 1.125rem;display:flex;align-items:center;cursor:pointer}.code-example__expand:focus{outline:1px solid #0062ff;outline-offset:-1px}.code-example__expand:hover span{border-bottom:1px solid #fff}.code-example__expand span{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;display:inline-block;line-height:1;border-bottom:1px solid transparent;-webkit-transition:border .11s;transition:border .11s}.code-example__expand--icon{margin-left:.5rem;fill:#fff;-webkit-transition:.11s;transition:.11s}.code-example__expand--icon--rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.code-example__expand--hidden{display:none}.code-example .token{white-space:nowrap}.code-example .token:last-of-type{margin-right:0}.color-block{position:relative;font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px}.color-block__color{position:relative;display:block;margin-top:.125rem;height:.875rem;width:.875rem;border-radius:.875rem}.color-block__color:before{position:absolute;content:"";height:.875rem;width:.875rem;border-radius:.875rem;border:1px solid #dcdcdc;left:-1px;top:-1px}.color-block__color--with-label{position:absolute;top:0;left:5rem}.color-token-table{display:flex;flex-direction:column}.color-token-table__theme-switcher{position:relative;width:100%;height:3rem;margin-bottom:1.75rem;background:#fff}.color-token-table__theme-switcher:before{content:"";display:block;position:absolute;top:-16px;left:0;width:110%;height:64px;background:#f3f3f3}.color-token-table__theme-switcher--sticky{position:fixed;top:112px;z-index:9999;max-width:1164px;box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}@media (max-width:1580px){.color-token-table__theme-switcher--sticky{max-width:73.35%}}@media (max-width:1380px){.color-token-table__theme-switcher--sticky{max-width:73.1%}}@media (max-width:1280px){.color-token-table__theme-switcher--sticky{max-width:72.98%}}@media (max-width:1055px){.color-token-table__theme-switcher--sticky{max-width:calc(100% - 32px)}}@media (max-width:671px){.color-token-table__theme-switcher--sticky{max-width:100%}}h3.page-h3--sticky{margin-top:100px!important}.color-token-table__theme-switcher .bx--content-switcher-btn:not(.bx--content-switcher--selected){background-color:#fff;color:#171717}.color-token-table__theme-switcher .bx--content-switcher-btn:not(.bx--content-switcher--selected):hover{background-color:#e5e5e5}.color-token-table__theme-switcher .bx--content-switcher-btn{flex:1 1;border-radius:0;height:3rem;padding:.5rem 1rem}@media (min-width:42rem){.color-token-table__theme-switcher .bx--content-switcher-btn{padding-right:4rem}}.color-token-table__theme-switcher .bx--content-switcher-btn:not(:last-of-type):after{height:24px;right:-1px;top:12px}.color-token-value{display:flex;justify-content:space-between}.color-token-value .bx--overflow-menu{margin-left:.5rem}.color-token-value .bx--overflow-menu-options{left:-9.25rem;top:2rem}.color-token-value .bx--overflow-menu__icon{width:.75rem;height:.75rem}.color-token-value>div{display:flex}@media (max-width:580px){.color-token-value>div{position:absolute;right:1rem;top:1rem}}.color-token-value__block{display:block;width:3rem;height:3rem;border-radius:3rem}@media (max-width:672px){.color-token-value__block{width:2rem;height:2rem;border-radius:2rem}}@media (max-width:580px){.color-token-value__block{width:3rem;height:3rem;border-radius:3rem}}.color-token-table .page-table{background:#fff;margin-top:.5rem;width:100%}.color-token-table .page-table thead tr{border-bottom:1px solid #dcdcdc;display:flex}@media (max-width:580px){.color-token-table .page-table thead tr{display:none}}.color-token-table .page-table thead tr th{flex:1 1;flex-basis:33.33333%}.color-token-table .page-table tbody tr{display:flex;border-bottom:1px solid #dcdcdc;min-height:6.5rem}@media (max-width:580px){.color-token-table .page-table tbody tr{flex-direction:column;height:auto;position:relative}}.color-token-table .page-table tbody tr:last-child{border-bottom:none}.color-token-table .page-table tbody tr td{flex:1 1;flex-basis:33.33333%}.color-token-table .page-table tbody tr td:last-child{padding-right:.5rem}.color-token-table .page-table tbody tr td:not(:last-child){border-right:1px solid #dcdcdc}.component-docs>h2+div>h3:first-child,.component-docs>h2+div>h4:first-child{padding-top:0!important}body .component-docs pre{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px;background:#171717;padding:.5rem 3rem .5rem 1rem!important;margin-bottom:1.5rem!important;margin-left:-1rem;border-radius:0;color:#fff}body .component-docs code[class*=language-]{background:transparent}.component-docs h1{display:none}.component-docs .token:last-of-type{margin-right:0}.component-docs h2{margin-top:5rem;margin-bottom:1rem;font-size:1.75rem;font-weight:400;line-height:129%;letter-spacing:0;font-size:calc(1.75rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.component-docs h2{font-size:1.75rem;line-height:125%;font-size:calc(1.75rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.component-docs h2{font-size:2rem}}.component-docs h3{margin-top:4rem;margin-bottom:1rem;font-size:1.25rem;font-weight:400;line-height:130%;letter-spacing:0;font-size:calc(1.25rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.component-docs h3{font-size:1.25rem;line-height:125%;font-size:calc(1.25rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.component-docs h3{font-size:1.5rem}}.component-docs h4{margin-top:.75rem;font-size:1rem;font-weight:600;line-height:1.375rem;letter-spacing:0}.component-docs h5,.component-docs h6{margin-top:.75rem;font-size:.875rem;font-weight:600;line-height:1.125rem;letter-spacing:.16px}.component-example{width:100%;max-width:100%;display:block;color:#fff;margin-bottom:1.5rem}.page-content>div>div:first-child .component-example__heading-label{padding-bottom:1.5rem}.component-example__live{display:flex;align-items:center;justify-content:center;width:100%;min-height:12.5rem;position:relative;padding:2rem 2rem 2.5rem;margin:0;background-color:#fff;color:#171717;border:1rem solid #fff}.component-example__live.component-example__live--light{background-color:#f3f3f3}.component-example__live.component-example__live--rendered{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}.component-example__view-full-render{position:absolute;right:0;bottom:0;color:#565656;font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;padding:.5rem 1rem;z-index:9999}.component-example__view-full-render--react{z-index:9099}.component-toolbar{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;display:flex;align-items:center;height:3rem;background:#171717;color:#fff;border-bottom:1px solid #3d3d3d}.component-toolbar__current{height:100%;display:flex;align-items:center;padding:0 1rem}.component-toolbar__links{display:flex;align-items:center;justify-content:flex-start;flex:2 1}.component-toolbar__links a{position:relative;top:1px;margin-left:1rem;color:#6ea6ff;text-decoration:none;border-bottom:1px solid transparent}.component-toolbar__links a:hover{border-bottom:1px solid #6ea6ff}.component-toolbar__links svg{fill:#6ea6ff;position:relative;top:3px;margin-top:-2px;margin-left:.25rem}.component-toolbar__switcher{display:flex;align-items:center;border-left:1px solid #3d3d3d;height:100%;padding-left:1rem;padding-right:1rem}.component-toolbar__switcher .bx--form-item{margin-right:0;margin-bottom:0}.component-toolbar__switcher .bx--radio-button__label{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;color:#fff}.component-toolbar__switcher .bx--radio-button-group{margin-top:0}.component-toolbar__switcher .radioButtonWrapper:last-child{padding-left:1rem}.component-toolbar__switcher .bx--radio-button__appearance{background-color:transparent;border-color:#fff}.component-toolbar__switcher .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance{border-color:#fff}.component-toolbar__switcher .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance:before{background-color:#fff}.component-overview{padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start}.component-item{width:33%;background:#fff;position:relative;-webkit-transition:.11s;transition:.11s;width:100%;border-bottom:1px solid #dcdcdc}.component-item:hover{background:#e5e5e5}.component-item:active{background:#bebebe}.component-item:last-child{border:none}@media (min-width:42rem){.component-item{width:50%;border-right:1px solid #dcdcdc}.component-item:nth-child(2n+2){border-right:none}.component-item:last-child,.component-item:nth-last-child(2){border-bottom:none}.component-item:last-child{border-right:none}}@media (min-width:66rem){.component-item{width:33.33%}.component-item:nth-child(2n+2){border-right:1px solid #dcdcdc}.component-item:nth-child(3n+3){border-right:none}.component-item:last-child,.component-item:nth-last-child(2),.component-item:nth-last-child(3){border-bottom:none}.component-item:last-child{border-right:none}}@media (min-width:82rem){.component-item{width:25%}.component-item:nth-child(3n+3){border-right:1px solid #dcdcdc}.component-item:nth-child(4n+4){border-right:none}.component-item:last-child,.component-item:nth-last-child(2),.component-item:nth-last-child(3),.component-item:nth-last-child(4){border-bottom:none}.component-item:last-child{border-right:none}}.component-item__link{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.component-item__img{margin:0;display:block}.component-name{font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;color:#171717;text-decoration:none;text-align:left;display:flex;position:absolute;top:1rem;left:1rem}.component-status .bx--tag{white-space:nowrap}.component-status .page-table td{padding:.75rem 1rem}.component-status__key{margin-top:5rem}.component-status__key .page-h4{margin-bottom:1.5rem}.component-status--unavailable{padding-left:.75rem}.glossary-entry{padding-top:2.25rem}.glossary-entry__main-heading span{text-transform:lowercase}.glossary-entry__subtext{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;color:#565656;font-style:italic;margin-top:.25rem}.glossary-nav{position:absolute;right:1.5rem;display:none;flex-direction:column;align-items:center;justify-content:flex-start;line-height:1.5;padding:10rem 0 0}@media (min-width:66rem){.glossary-nav{display:flex}}.glossary-nav--fixed{position:fixed;top:0}.glossary .bx--list__item{list-style-type:none!important;padding:0;width:100%;-webkit-transition:all .11s;transition:all .11s;display:block}.glossary .bx--list__item a{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;width:1.5rem;height:1.5rem;padding:.0625rem 0 0;display:block;text-align:center;text-decoration:none;color:#565656}.glossary .bx--list__item:hover a{color:#171717;background:#e5e5e5}.glossary .bx--list__item.glossary-nav__item--active a{color:#171717;background:#dcdcdc}.typography-table{background:#fff;border-bottom:.0625rem solid #dcdcdc}.typography-table table tbody tr{border:none}.typography-table table thead th{font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;border:none;color:#8c8c8c;padding:1rem 0;text-align:left}.typography-table table tbody td{white-space:nowrap;border:none;padding-bottom:auto;color:#171717;vertical-align:top}.typography-table table tbody td:first-child{font-size:.75rem;padding:0 3rem 0 0}@media (min-width:42rem){.typography-table table tbody td:first-child{padding-right:7rem}}@media (min-width:66rem){.typography-table table tbody td:first-child{padding-right:2rem}}@media (min-width:82rem){.typography-table table tbody td:first-child{padding-right:3rem}}.typography-table table tbody tr:first-child td:nth-child(2){font-size:.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(2) td:nth-child(2){font-size:.875rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(3) td:nth-child(2){font-size:1rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(4) td:nth-child(2){font-size:1.125rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(5) td:nth-child(2){font-size:1.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(6) td:nth-child(2){font-size:1.5rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(7) td:nth-child(2){font-size:1.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(8) td:nth-child(2){font-size:2rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(9) td:nth-child(2){font-size:2.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(10) td:nth-child(2){font-size:2.625rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(11) td:nth-child(2){font-size:3rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(12) td:nth-child(2){font-size:3.375rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(13) td:nth-child(2){font-size:3.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(14) td:nth-child(2){font-size:4.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(15) td:nth-child(2){font-size:4.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(16) td:nth-child(2){font-size:5.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(17) td:nth-child(2){font-size:5.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:first-child td:first-child{padding-bottom:.36rem}.typography-table table tbody tr:nth-child(2) td:first-child{padding-bottom:.38rem}.typography-table table tbody tr:nth-child(3) td:first-child{padding-bottom:.6rem}.typography-table table tbody tr:nth-child(4) td:first-child{padding-bottom:.74rem}.typography-table table tbody tr:nth-child(5) td:first-child{padding-bottom:1rem}.typography-table table tbody tr:nth-child(6) td:first-child{padding-bottom:1.4rem}.typography-table table tbody tr:nth-child(7) td:first-child{padding-bottom:1.625rem}.typography-table table tbody tr:nth-child(8) td:first-child{padding-bottom:2rem}.typography-table table tbody tr:nth-child(9) td:first-child{padding-bottom:2.5rem}.typography-table table tbody tr:nth-child(10) td:first-child{padding-bottom:3rem}.typography-table table tbody tr:nth-child(11) td:first-child{padding-bottom:3.5rem}.typography-table table tbody tr:nth-child(12) td:first-child,.typography-table table tbody tr:nth-child(13) td:first-child{padding-bottom:4rem}.typography-table table tbody tr:nth-child(14) td:first-child{padding-bottom:4.5rem}.typography-table table tbody tr:nth-child(15) td:first-child{padding-bottom:5rem}.typography-table table tbody tr:nth-child(16) td:first-child{padding-bottom:5.5rem}.typography-table table tbody tr:nth-child(17) td:nth-child(2){padding-bottom:2rem}.type-weight{background:#fff;padding:1rem;margin-bottom:1.5rem}.type-weight p{font-size:3rem;padding:0;line-height:1.25;color:#171717}.type-weight .bx--type-italic{font-style:italic}.type-weight .bx--type-semibold{font-weight:600}.type-weight .bx--type-regular{font-weight:400}.type-weight .bx--type-light{font-weight:300}.homepage-video--main{width:180%;height:100%;position:absolute;top:0;right:0}@media (min-width:42rem){.homepage-video--main{width:100%}}.homepage-video--wrapper{width:100%;height:100%;position:absolute;top:0;right:0;padding-bottom:56.25%}.homepage-video--wrapper iframe{position:absolute;top:-20%;right:0}@media (max-width:1260px){.homepage-video--wrapper iframe{top:-10%}}@media (max-width:1100px){.homepage-video--wrapper iframe{top:0}}.homepage--video--overlay{position:absolute;width:100%;height:100%;top:0;left:0;background:#000;opacity:.6}.homepage-video--controls{position:absolute;bottom:.875rem;left:1rem;height:1.5rem;width:1.5rem;background:transparent;outline:none;border:none;padding:0;z-index:10}@media (min-width:66rem){.homepage-video--controls{left:271px}}.homepage-video--controls:focus{outline:2px solid #0062ff;outline-offset:-2px}.homepage-video--controls .mouseIn,.homepage-video--controls .mouseOut{fill:#fff}.homepage-video--controls .cls-1{fill:none}.bx--typeset-style-container{position:relative;padding:0 .5rem;margin-bottom:3rem}@media (min-width:42rem){.bx--typeset-style-container{padding:0;left:0;margin-right:0}}@media (min-width:66rem){.bx--typeset-style-container{margin-top:0;left:.5rem;margin-right:.5rem}}.bx--typeset-style-container .page-h4{margin-top:3rem;display:inline-block}.bx--typeset-style-container .page-h4:before{display:none}.bx--typeset-style-container .page-h4:first-letter{text-transform:uppercase}.bx--typeset-style-button{background-color:transparent;border:none;border-radius:0;height:100%;margin:0;padding:0 1rem;text-transform:capitalize;z-index:4}.bx--typeset-style-button:hover{background-color:#dcdcdc}.bx--typeset-style-button.selected{background-color:#171717;color:#f3f3f3}.bx--typeset-style-button.selected:hover{background-color:#171717}.bx--typeset-style-button:focus{outline:2px solid #0062ff;outline-offset:0;position:relative}.bx--typeset-style-controls{height:100%;left:0;position:absolute!important;top:0;width:100vw}@media (min-width:42rem){.bx--typeset-style-controls{margin-left:0;width:100%}}.bx--typeset-style-controls-sticky{align-items:center;background-color:#fff;width:auto;z-index:2;box-sizing:content-box}.bx--typeset-style-controls-sticky-stuck{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.bx--typeset-style-controls-sticky-stuck:after,.bx--typeset-style-controls-sticky-stuck:before{content:"";position:absolute;background:#f3f3f3;height:6rem;width:1rem}@media (min-width:42rem){.bx--typeset-style-controls-sticky-stuck:after,.bx--typeset-style-controls-sticky-stuck:before{height:4rem}}.bx--typeset-style-controls-sticky-stuck:before{left:-2rem}.bx--typeset-style-controls-sticky-stuck:after{right:-2rem}.bx--typeset-style-nav-shiv{width:100%;height:1rem}.bx--typeset-style-breakpoint-controls{height:3rem;align-items:center;display:flex;overflow-x:auto;white-space:nowrap;padding-left:1rem;padding-right:0;width:100%}@media (min-width:42rem){.bx--typeset-style-breakpoint-controls{width:62.5%}}@media (min-width:66rem){.bx--typeset-style-breakpoint-controls{width:50%}}.bx--typeset-style-screen-width-label{padding-right:1rem;display:inline-block}.bx--typeset-style-screen-controls{align-items:center;height:3rem;border-top:1px solid #dcdcdc;padding-left:1rem;padding-right:1rem;display:grid;grid-template-columns:auto 1fr auto;width:100%}@media (min-width:42rem){.bx--typeset-style-screen-controls{border-top:none;border-left:1px solid #dcdcdc;width:37.5%}}@media (min-width:66rem){.bx--typeset-style-screen-controls{width:50%}}.bx--typeset-style-screen-label{height:auto;margin-bottom:0;min-width:3.4rem;text-align:right}.bx--typeset-style-input{margin:0 1.25rem 0 0;width:100%}.bx--typeset-style-toggle-container{position:relative;z-index:1}.bx--typeset-style-toggle-button{background-color:#fff;box-shadow:inset 0 -1px 0 0 #dcdcdc;color:#171717;border:none;cursor:pointer;margin:0;height:3rem}.bx--typeset-style-toggle-button input{margin:0;visibility:hidden;width:0}.bx--typeset-style-toggle-button.checked{background-color:#171717;color:#fff}.bx--typeset-style-toggle-button.checked:hover{background-color:#171717}.bx--typeset-style-toggle-button:hover{background-color:#dcdcdc}.bx--typeset-style-button-controls-container{height:100%;margin-left:auto}.bx--typeset-style-breakpoints-container{position:relative;margin-top:1rem}@media (min-width:42rem){.bx--typeset-style-breakpoints-container{margin-top:0}}.bx--typeset-style-section-spacer{margin-bottom:calc(1rem + 1px)}.bx--typeset-style-title-shiv{padding-top:1rem;background-color:#f3f3f3;position:relative}.bx--typeset-style-group-title-container{background-color:#fff;height:3rem;padding:1rem;border-bottom:1px solid #dcdcdc;display:flex;flex-direction:row;align-content:center}.bx--typeset-style-group-title{margin:0;padding:0}.bx--input-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:0;position:relative;cursor:pointer;padding-top:.5rem;padding-bottom:.5rem;width:100%}@supports (-ms-ime-align:auto){.bx--input-range{padding-top:0;padding-bottom:0}}.bx--input-range::-webkit-slider-runnable-track{background:#dcdcdc;height:.0625rem}.bx--input-range::-moz-range-track{background:#dcdcdc;height:.0625rem}.bx--input-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#000;border:0;border-radius:100%;height:.875rem;margin-top:-.4375rem;width:.875rem;-webkit-transition-property:height,width,margin;transition-property:height,width,margin;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:cubic-bezier(.2,0,.38,.9);transition-timing-function:cubic-bezier(.2,0,.38,.9)}.bx--input-range::-moz-range-thumb{-moz-appearance:none;appearance:none;background:#000;border:0;border-radius:100%;height:.875rem;margin-top:-.4375rem;width:.875rem;-webkit-transition-property:height,width,margin;transition-property:height,width,margin;transition-duration:.1s;transition-timing-function:cubic-bezier(.2,0,.38,.9)}.bx--input-range::-ms-track{background:transparent;border-color:transparent;border-width:.875rem 0;color:transparent;height:.0625rem}.bx--input-range::-ms-fill-lower,.bx--input-range::-ms-fill-upper{background:#000}.bx--input-range::-ms-thumb{appearance:none;background:#000;border-radius:100%;border:0;height:.875rem;margin-top:-.0625rem;width:.875rem}.bx--input-range:after{background:#000;content:"";position:absolute;height:.0625rem;width:var(--track-width)}.bx--input-range:active::-webkit-slider-thumb,.bx--input-range:hover::-webkit-slider-thumb{margin-top:-.5625rem;width:1.125rem;height:1.125rem}.bx--input-range:active::-moz-range-thumb,.bx--input-range:hover::-moz-range-thumb{margin-top:-.5625rem;width:1.125rem;height:1.125rem}.bx--input-range:active::-ms-thumb,.bx--input-range:hover::-ms-thumb{margin-top:-.125rem;width:1.125rem;height:1.125rem}.bx--input-range:focus{outline:2px solid #0062ff;outline-offset:0}.bx--sticky-container{position:-webkit-sticky;position:sticky;z-index:5;top:0;-webkit-transition-property:top;transition-property:top;-webkit-transition-duration:.24s;transition-duration:.24s;-webkit-transition-timing-function:cubic-bezier(.2,0,.38,.9);transition-timing-function:cubic-bezier(.2,0,.38,.9)}div[class*=PageHeader-module--page-header--shifted]+div>div>.bx--sticky-container-visible{top:3rem}.bx--sticky-container-visible{top:6rem}.bx--sticky-container-hidden.bx--sticky-container-banner{top:2.5rem}.bx--sticky-container-secondary{z-index:4}.bx--sticky-container-secondary-hidden{top:3rem}.bx--sticky-container-secondary-hidden.bx--sticky-container-banner{top:5.5rem}.bx--sticky-container-secondary-visible{top:6rem}.bx--sticky-container-secondary-visible.bx--sticky-container-banner{top:8.5rem}.bx--typeset-example,.bx--typeset-example-container{margin-top:1rem}.bx--typeset-example-row{background-color:#fff;min-height:13.5rem}.bx--typeset-example-group-title{background-color:#dcdcdc;height:4rem}.bx--typeset-example-description{padding:1rem 15% 1rem 1rem;overflow:hidden}@media (min-width:42rem){.bx--typeset-example-description{width:62.5%}}@media (min-width:66rem){.bx--typeset-example-description{width:66.7%}}.bx--typeset-example-specs{padding:1rem;width:33.3%}@media (min-width:42rem){.bx--typeset-example-specs{border-left:1px solid #dcdcdc}}.bx--typeset-example-specs-text{margin-bottom:.5rem}.bx--typeset-example-code-style{display:block;margin-top:.5rem}.PageHeader-module--bx--text-truncate--end--mZWeX,.PageHeader-module--bx--text-truncate--front--3zvrI{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.PageHeader-module--bx--text-truncate--front--3zvrI{direction:rtl}.PageHeader-module--page-header--3hIan{--height:20rem;height:20rem;height:var(--height);background:#000;color:#fff;width:100%;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid #3d3d3d}.PageHeader-module--with-tabs--3nKxA{height:calc(var(--height) - 3rem)}.PageHeader-module--text--o9LFq{font-size:2.625rem;font-weight:300;line-height:119%;letter-spacing:0;font-size:calc(2.625rem + 0*(100vw - 20rem)/22);margin-bottom:2rem;margin-top:auto}@media (min-width:42rem){.PageHeader-module--text--o9LFq{font-size:2.625rem;font-size:calc(2.625rem + 0.75*(100vw - 42rem)/24)}}@media (min-width:66rem){.PageHeader-module--text--o9LFq{font-size:3.375rem;font-size:calc(3.375rem + 0.375*(100vw - 66rem)/16)}}@media (min-width:82rem){.PageHeader-module--text--o9LFq{font-size:3.75rem;line-height:117%;font-size:calc(3.75rem + 1*(100vw - 82rem)/17)}}@media (min-width:99rem){.PageHeader-module--text--o9LFq{line-height:113%;font-size:4.75rem}}.EditLink-module--bx--text-truncate--end--2pqje,.EditLink-module--bx--text-truncate--front--3_lIE{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.EditLink-module--bx--text-truncate--front--3_lIE{direction:rtl}.EditLink-module--link--1qzW3{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;-webkit-transition:color .11s;transition:color .11s;color:#565656}.EditLink-module--link--1qzW3:hover{color:#171717}.EditLink-module--row--1B9Gk{position:relative;top:9rem}.container--dark .EditLink-module--link--1qzW3,.container--dark .EditLink-module--link--1qzW3:hover{color:#fff}.PageTabs-module--bx--text-truncate--end--267NA,.PageTabs-module--bx--text-truncate--front--3xEQF{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.PageTabs-module--bx--text-truncate--front--3xEQF{direction:rtl}.PageTabs-module--tabs-container--8N4k0{margin:0;width:100%;background:#000;position:-webkit-sticky;position:sticky;top:3rem;z-index:6000}.PageTabs-module--list--3eFQc{display:flex;flex-direction:row;width:100%;list-style:none;padding:0;overflow-x:auto;scrollbar-width:none}.PageTabs-module--list-item--nUmtD{display:flex}.PageTabs-module--link--1mDJ1{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;padding:13px 1rem 0;text-decoration:none;line-height:1;color:#fff;white-space:nowrap;border-top:3px solid transparent;height:3rem;-webkit-transition:all .15s cubic-bezier(.2,0,.38,.9);transition:all .15s cubic-bezier(.2,0,.38,.9)}@media (min-width:42rem){.PageTabs-module--link--1mDJ1{padding-right:3rem}}.PageTabs-module--link--1mDJ1:hover{background:#353535}.PageTabs-module--selected-item--YPVr3 .PageTabs-module--link--1mDJ1{border-top:3px solid #0062ff;background:#3d3d3d}.PageTabs-module--list-item--nUmtD:not(.PageTabs-module--selected-item--YPVr3) .PageTabs-module--link--1mDJ1{color:#bebebe}.PageTabs-module--list-item--nUmtD:not(.PageTabs-module--selected-item--YPVr3) .PageTabs-module--link--1mDJ1:hover{color:#fff}
This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div id="example-n7ovue79hkj-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-labelledby="example-n7ovue79hkj-label" data-tooltip-trigger data-tooltip-target="#example-n7ovue79hkj"
role="button" class="bx--tooltip__trigger" aria-controls="example-n7ovue79hkj" aria-haspopup="true">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
</div>
</div>
<div id="example-n7ovue79hkj" data-floating-menu-direction="bottom" class="bx--tooltip"
data-avoid-focus-on-open role="dialog" aria-describedby="example-n7ovue79hkj-body" aria-labelledby="example-n7ovue79hkj-label">
<span class="bx--tooltip__caret"></span>
<p id="example-n7ovue79hkj-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
needed
please use a modal instead.</p>
<div class="bx--tooltip__footer">
<a href="#" class="bx--link">Learn More</a>
<button class="bx--btn bx--btn--primary bx--btn--sm"
type="button">Create</button>
</div>
</div>
<div id="example-qqizuiuj38-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-labelledby="example-qqizuiuj38-label" data-tooltip-trigger data-tooltip-target="#example-qqizuiuj38"
role="button" class="bx--tooltip__trigger" aria-controls="example-qqizuiuj38" aria-haspopup="true">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
</div>
</div>
<div id="example-qqizuiuj38" data-floating-menu-direction="bottom" class="bx--tooltip"
data-avoid-focus-on-open role="dialog" aria-describedby="example-qqizuiuj38-body" aria-labelledby="example-qqizuiuj38-heading">
<span class="bx--tooltip__caret"></span>
<h4 id="example-qqizuiuj38-heading">Heading within a Tooltip</h4>
<p id="example-qqizuiuj38-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
needed
please use a modal instead.</p>
<div class="bx--tooltip__footer">
<a href="#" class="bx--link">Learn More</a>
<button class="bx--btn bx--btn--primary bx--btn--sm"
type="button">Create</button>
</div>
</div>
<div id="example-w48y2lxjdck-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-labelledby="example-w48y2lxjdck-label" data-tooltip-trigger data-tooltip-target="#example-w48y2lxjdck"
role="button" class="bx--tooltip__trigger" aria-controls="example-w48y2lxjdck" aria-haspopup="true">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
</div>
</div>
<div id="example-w48y2lxjdck" data-floating-menu-direction="bottom" class="bx--tooltip"
data-avoid-focus-on-open role="dialog" aria-describedby="example-w48y2lxjdck-body" aria-label="Tooltip label">
<span class="bx--tooltip__caret"></span>
<p id="example-w48y2lxjdck-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
needed
please use a modal instead.</p>
<div class="bx--tooltip__footer">
<a href="#" class="bx--link">Learn More</a>
<button class="bx--btn bx--btn--primary bx--btn--sm"
type="button">Create</button>
</div>
</div>
start
center
end
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<p>start</p>
<br>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-start">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-start">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-start">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<br>
<br>
<p>center</p>
<br>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<br>
<br>
<p>end</p>
<br>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-end">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-end">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<button
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-end">
<span class="bx--assistive-text">Filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
</button>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--tooltip--definition bx--tooltip--a11y">
<button
aria-describedby="example-start"
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start">
Definition Tooltip (start aligned)
</button>
<div class="bx--assistive-text" id="example-start" role="tooltip">Brief description of the dotted, underlined word above.</div>
</div>
<br>
<div class="bx--tooltip--definition bx--tooltip--a11y">
<div
aria-describedby="example-center"
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center">
Definition Tooltip (center aligned)
</div>
<div class="bx--assistive-text" id="example-center" role="tooltip">Brief description of the dotted, underlined word above.</div>
</div>
<br>
<div class="bx--tooltip--definition bx--tooltip--a11y">
<span
aria-describedby="example-end"
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end">
Definition Tooltip (end aligned)
</span>
<div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted, underlined word above.</div>
</div>
import { Tooltip } from 'carbon-components';
carbon-components.min.js
)var Tooltip = CarbonComponents.Tooltip;
// `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
Tooltip.create(document.getElementById('my-tooltip-trigger'));
Name | Param | Description |
---|---|---|
data-tooltip-target |
Any unique CSS selector | The selector, typically an id, to find the tooltip corresponding to the trigger. |
data-tooltip-direction |
left , top , right , or bottom |
Setting this attribute overrides the directions set by this.options.tooltipDirection |
Name | Params | Description |
---|---|---|
show |
Shows the tooltip. | |
hide |
Hides the tooltip. | |
release |
Deletes the instance and removes document event listeners. |
// `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
var tooltipInstance = Tooltip.create(
document.getElementById('my-tooltip-trigger')
);
tooltipInstance.show();
Option | Default Selector | Description |
---|---|---|
selectorInit |
[data-tooltip-trigger] |
The CSS selector to find the tooltip. |
objMenuOffset |
{ top: 10, left: 0 } |
An object containing the top and left offset values in px |
// `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
Tooltip.create(document.getElementById('my-tooltip-trigger'), {
objMenuOffset(menuBody, direction) {
const { objMenuOffset: offset } = Tooltip.options;
const { top, left } =
typeof offset !== 'function' ? offset : offset(menuBody, direction);
return {
top: top + 8,
left,
};
},
});
Event Name | Description |
---|---|
'floating-menu-beingshown' | The custom event fired before the menu gets open. |
'floating-menu-shown' | The custom event fired after the menu gets open. |
'floating-menu-beinghidden' | The custom event fired before the menu gets closed. |
'floating-menu-hidden' | The custom event fired after the menu gets closed. |
document.addEventListener('floating-menu-beinghidden', function(evt) {
if (myApplication.shouldTooltipKeptOpen(evt.target)) {
evt.preventDefault();
}
});
document.addEventListener('floating-menu-hidden', function(evt) {
myAnalyticsLibrary.send({
action: 'Tooltip hidden',
id: evt.target.id,
});
});
Interactive tooltip should be used if there are actions a user can take in the tooltip (e.g. a link or a button). For more regular use case, e.g. giving the user more text information about something, use definition tooltip or icon tooltip.
Selector | Description |
---|---|
.bx--tooltip__trigger--bold |
Modifier class to make label bold. |
By default, the tooltip (.bx--tooltip
) goes right under <body>
. You can
change the behavior by adding data-floating-menu-container
to one of the DOM
ancestors of the tooltip's original location. For example, if you have HTML
structure like below, the menu body will go under the second <div>
:
<body>
<div>
<div data-floating-menu-container>
<div>
<div class="bx--tooltip__label" ...>
Tooltip label
<div
tabindex="0"
data-tooltip-trigger
data-tooltip-target="#unique-tooltip"
class="bx--tooltip__trigger"
...
>
...
</div>
</div>
<div
id="unique-tooltip"
data-floating-menu-direction="bottom"
class="bx--tooltip"
...
>
<span class="bx--tooltip__caret"></span> ...
</div>
</div>
</div>
</div>
</body>
Definition tooltip is for regular use case of tooltip, e.g. giving the user more text information about something, like defining a word. This works better than the interactive tooltip in regular use cases because the info icon used in interactive tooltip can be repetitive when it’s shown several times on a page. Definition tooltip does not use any JavaScript. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
Selector | Description |
---|---|
.bx--tooltip--top |
A simple tooltip that is displayed above the trigger. |
.bx--tooltip--bottom |
A simple tooltip that is displayed below the trigger. |
Icon tooltip is for short single line of text describing an icon. Icon tooltip does not use any JavaScript. No label should be added to this variation. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
Selector | Description |
---|---|
.bx--tooltip--top |
A simple tooltip that is displayed above the trigger. |
.bx--tooltip--right |
A simple tooltip that is displayed to the right of the trigger. |
.bx--tooltip--bottom |
A simple tooltip that is displayed below the trigger. |
.bx--tooltip--left |
A simple tooltip that is displayed to the left of the trigger. |