@salesforce-ux/design-system/__internal/chunked/docs/ui/components/tooltips/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,o={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},8078:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return g},getElement:function(){return h}});var o=n(1594),i=n(5671),r=n(6547),l=n(2436),a=n(9582),s=(n(5619),n(8342)),u=n(4216),c=n(806),d=i.XB.a,f=i.XB.code,p=i.XB.h2,m=i.XB.h3,b=i.XB.p,h=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A Tooltip is a short message giving non-essential, contextual information, activated by hover, focus, or click. It can't be focused or contain focusable content."),(0,o.createElement)(r.A,{exampleOnly:!0,demoStyles:" padding-left: 1rem; padding-top: 1rem; position: relative; "},(0,c.NO)(u.K1,"button-icon")),p({id:"About-Tooltips"},"About Tooltips"),b({},"Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, ",f({},".slds-nubbin_left"),", ",f({},".slds-nubbin_left-top"),", ",f({},".slds-nubbin_left-bottom"),", ",f({},".slds-nubbin_top-left"),", ",f({},".slds-nubbin_top-right"),", ",f({},".slds-nubbin_right-top"),", ",f({},".slds-nubbin_right-bottom"),", ",f({},".slds-nubbin_bottom-left"),", ",f({},".slds-nubbin_bottom-right"),"."),b({},"Learn more about how to use them at the ",d({href:"/components/popovers/#flavor-nubbins"},"Nubbins documentation"),"."),m({id:"Accessibility"},"Accessibility"),b({},"Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the ",f({},"aria-describedby")," attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content."),b({},"When using a link as the focusable element to show a tooltip, add a ",f({},"<div>")," at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add ",f({},"aria-hidden='true'")," to this element, and ensure that the link text itself matches the text within this ",f({},"<div>"),"."),p({id:"Base"},"Base"),(0,o.createElement)(r.A,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},(0,c.NO)(u.Ay)),p({id:"Examples"},"Examples"),m({id:"As-an-icon-link"},"As an icon link"),(0,o.createElement)(r.A,{demoStyles:" padding-left: 2rem; padding-top: 6.75rem; position: relative; "},(0,c.NO)(u.K1,"link")),m({id:"As-a-Button-Icon"},"As a Button Icon"),(0,o.createElement)(r.A,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},(0,c.NO)(u.K1,"button-icon")),m({id:"As-a-Button"},"As a Button"),(0,o.createElement)(r.A,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},(0,c.NO)(u.K1,"button")),p({id:"Modifiers"},"Modifiers"),m({id:"Motion"},"Motion"),(0,o.createElement)(a.A,null,(0,o.createElement)(l.A,null,(0,o.createElement)("strong",null,"Bottom To Top"),(0,o.createElement)(r.A,{toggleCode:!1},(0,c.NO)(u.K1,"bottom-to-top"))),(0,o.createElement)(l.A,null,(0,o.createElement)("strong",null,"Top To Bottom"),(0,o.createElement)(r.A,{toggleCode:!1},(0,c.NO)(u.K1,"top-to-bottom"))),(0,o.createElement)(l.A,null,(0,o.createElement)("strong",null,"Right To Left"),(0,o.createElement)(r.A,{toggleCode:!1},(0,c.NO)(u.K1,"right-to-left"))),(0,o.createElement)(l.A,null,(0,o.createElement)("strong",null,"Left To Right"),(0,o.createElement)(r.A,{toggleCode:!1},(0,c.NO)(u.K1,"left-to-right")))),m({id:"Toggle"},"Toggle"),(0,o.createElement)(a.A,null,(0,o.createElement)(l.A,null,(0,o.createElement)("strong",null,"Rise"),(0,o.createElement)(r.A,{toggleCode:!1},(0,c.NO)(u.K1,"rise"))),(0,o.createElement)(l.A,null,(0,o.createElement)("strong",null,"Fall"),(0,o.createElement)(r.A,{toggleCode:!1},(0,c.NO)(u.K1,"fall")))),p({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,o.createElement)(s.A,{name:"tooltips",type:"component"}))},g=function(){return(0,i.Qr)(h())}}},i={};function r(e){var t=i[e];if(void 0!==t)return t.exports;var n=i[e]={id:e,exports:{}};return o[e](n,n.exports,r),n.exports}r.m=o,r.amdO={},e=[],r.O=function(t,n,o,i){if(!n){var l=1/0;for(c=0;c<e.length;c++){n=e[c][0],o=e[c][1],i=e[c][2];for(var a=!0,s=0;s<n.length;s++)(!1&i||l>=i)&&Object.keys(r.O).every(function(e){return r.O[e](n[s])})?n.splice(s--,1):(a=!1,i<l&&(l=i));if(a){e.splice(c--,1);var u=o();void 0!==u&&(t=u)}}return t}i=i||0;for(var c=e.length;c>0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[n,o,i]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var i=Object.create(null);r.r(i);var l={};t=t||[null,n({}),n([]),n(n)];for(var a=2&o&&e;("object"==typeof a||"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},r.d(i,l),i},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=8311,function(){var e={8311:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,i,l=n[0],a=n[1],s=n[2],u=0;if(l.some(function(t){return 0!==e[t]})){for(o in a)r.o(a,o)&&(r.m[o]=a[o]);if(s)var c=s(r)}for(t&&t(n);u<l.length;u++)i=l[u],r.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return r.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),r.nc=void 0;var l=r.O(void 0,[3540],function(){return r(8078)});l=r.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/tooltips/docs.mdx.js"]=l}();