ItemButton:Auto Tooltip On Overflow

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: Unable to find an accessible element with the role "tooltip"

Here are the accessible roles:

  heading:

  Name "Auto Tooltip with tooltip=true":
  <h4
    class="t1w99uaf tw2oerx tyux941 tvzcrb9 tzyry6x"
    data-level="4"
    data-qa="Title"
  />

  Name "Auto Tooltip with Configuration Object":
  <h4
    class="t1w99uaf tw2oerx tyux941 tvzcrb9 tzyry6x"
    data-level="4"
    data-qa="Title"
  />

  Name "Auto vs Explicit Tooltip":
  <h4
    class="t1w99uaf tw2oerx tyux941 tvzcrb9 tzyry6x"
    data-level="4"
    data-qa="Title"
  />

  Name "No Tooltip When Not Overflowed":
  <h4
    class="t1w99uaf tw2oerx tyux941 tvzcrb9 tzyry6x"
    data-level="4"
    data-qa="Title"
  />

  Name "Auto Tooltip with Different Button Types":
  <h4
    class="t1w99uaf tw2oerx tyux941 tvzcrb9 tzyry6x"
    data-level="4"
    data-qa="Title"
  />

  Name "Auto Tooltip with Hotkeys":
  <h4
    class="t1w99uaf tw2oerx tyux941 tvzcrb9 tzyry6x"
    data-level="4"
    data-qa="Title"
  />

  --------------------------------------------------
  button:

  Name "This text is long enough to overflow and trigger auto tooltip":
  <button
    class="t17wjxf9 taa7b0x t1txi30v t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Short text":
  <button
    class="t17wjxf9 taa7b0x t1txi30v t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Long text with custom placement that will show tooltip on top":
  <button
    class="t17wjxf9 taa7b0x t1tfumgm t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Text with custom delay and bottom placement":
  <button
    class="t17wjxf9 taa7b0x t1tfumgm t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Explicit title takes priority over auto":
  <button
    class="t17wjxf9 taa7b0x t1tdqd9v t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Auto tooltip shows this text when overflowed":
  <button
    class="t17wjxf9 taa7b0x t1tdqd9v t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Short text (no tooltip)":
  <button
    class="t17wjxf9 taa7b0x t1uksw34 t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Normal length text (no tooltip)":
  <button
    class="t17wjxf9 taa7b0x t1v83p5d t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Primary button with overflow":
  <button
    class="t4hjdsd taa7b0x t1td0y7m t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="primary"
    tabindex="0"
    type="button"
  />

  Name "Outline button with overflow":
  <button
    class="t1k55y2g taa7b0x t1td0y7m t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="outline"
    tabindex="0"
    type="button"
  />

  Name "Clear button with overflow":
  <button
    class="tn9kwwq taa7b0x t1td0y7m t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="clear"
    tabindex="0"
    type="button"
  />

  Name "Save with very long descriptive name Keyboard shortcuts":
  <button
    class="t17wjxf9 taa7b0x t1tefsc4 t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-end-content=""
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-has-suffix=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="item"
    tabindex="0"
    type="button"
  />

  Name "Open document with long name Keyboard shortcuts":
  <button
    class="t4hjdsd taa7b0x t1tefsc4 t1yy3iza t3sew6b tdlsyyt ttcpdeq tr8a3c"
    data-description="none"
    data-has-end-content=""
    data-has-icon=""
    data-has-label=""
    data-has-start-content=""
    data-has-suffix=""
    data-popover-dismiss=""
    data-react-aria-pressable="true"
    data-shape="button"
    data-size="medium"
    data-theme="default"
    data-type="primary"
    tabindex="0"
    type="button"
  />

  --------------------------------------------------
  group:

  Name "Keyboard shortcuts":
  <div
    aria-label="Keyboard shortcuts"
    class="t1qntjh5 t12wjpp0 tdyx7av tp3unhd t1igyi6g"
    data-qa="HotKeys"
    role="group"
  />

  Name "Key combination 1":
  <div
    aria-label="Key combination 1"
    class="tj67i7z tp3unhd"
    role="group"
  />

  Name "Keyboard shortcuts":
  <div
    aria-label="Keyboard shortcuts"
    class="t1qntjh5 t12wjpp0 tdyx7av tp3unhd t1igyi6g"
    data-qa="HotKeys"
    role="group"
  />

  Name "Key combination 1":
  <div
    aria-label="Key combination 1"
    class="tj67i7z tp3unhd"
    role="group"
  />

  --------------------------------------------------
  text:

  Name "Key Win":
  <kbd
    aria-label="Key Win"
    class="tcpfnim t4n74xu t1i26qbh tqlf45o t139oyt2 t1r0h70g"
    data-type="default"
    role="text"
  />

  Name "Key S":
  <kbd
    aria-label="Key S"
    class="tcpfnim t4n74xu t1i26qbh tqlf45o t139oyt2 t1r0h70g"
    data-type="default"
    role="text"
  />

  Name "Key Win":
  <kbd
    aria-label="Key Win"
    class="tcpfnim t4n74xu t1i26qbh tqlf45o t139oyt2 t1r0h70g"
    data-type="primary"
    role="text"
  />

  Name "Key O":
  <kbd
    aria-label="Key O"
    class="tcpfnim t4n74xu t1i26qbh tqlf45o t139oyt2 t1r0h70g"
    data-type="primary"
    role="text"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body
  class="light sb-main-padded sb-show-main"
  spellcheck="false"
>
  
    
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <div
      class="sb-errordisplay_main"
    >
      
    
      <h1
        id="error-message"
      />
      
    
      <p>
        
      The component failed to render properly, likely due to a configuration issue in Storybook.
      Here are some common causes and how you can address them:
    
      </p>
      
    
      <ol>
        
      
        <li>
          
        
          <strong>
            Missing Context/Providers
          </strong>
          : You can use decorators to supply specific
        contexts or providers, which are sometimes necessary for components to render correctly. For
        detailed instructions on using decorators, please visit the
        
          <a
            href="https://storybook.js.org/docs/writing-stories/decorators"
          >
            Decorators documentation
       ...
    at Object.Om [as waitFor] (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:129:3293)
    at Ij.invoke (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:713:9408)
    at Ij.intercept (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:713:6908)
    at Ij.track (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:713:6640)
    at waitFor (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:713:5960)
    at r (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/interactions-B2FybOrn.js:1:459)
    at play (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/ItemButton.stories-C7Byp2RH.js:1:11226)
    at https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:911:3500
    at tH.runPhase (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:911:613)
    at tH.render (https://626ee6db91d1c8004a912249-lkgedpudto.capture-loopback.chromatic.com/assets/iframe-BGwtak0T.js:911:3470)