TextItem:Overflow With Tooltip

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"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

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/TextItem.stories-BQ2IpvdF.js:1:2581)
    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)