Add tooltip component to AI Module for use in AI Dashboard using native Popover API
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3569770. --> Reported by: [afoster](https://www.drupal.org/user/594458) Related to !1152 >>> <p>[Tracker]<br> <strong>Update Summary: </strong>Work Needed<br> <strong>Short Description: </strong>Add tooltip component to AI Dashboard using native Popover API<br> <strong>Check-in Date: </strong>1/26/2026<br> <em>Metadata is used by the <a href="https://www.drupalstarforge.ai/" title="AI Tracker">AI Tracker.</a> Docs and additional fields <a href="https://www.drupalstarforge.ai/ai-dashboard/docs" title="AI Issue Tracker Documentation">here</a>.</em><br> [/Tracker]</p> <h3 id="summary-problem-motivation">Overview</h3> <p>Implement tooltip component in AI Core's shared UI library using the native HTML Popover API <code>(popover=hint)</code> with CSS Anchor Positioning for automatic viewport-aware repositioning.</p> <h3>Requirements</h3> <ul> <li>Use CSS Anchor Positioning with position-try-fallbacks: flip-block (or flip-block flip-inline) so tooltips automatically flip when near viewport edges</li> <li>Apply tooltips in AI Dashboard as the first use case</li> </ul> <h3>Resources</h3> <ul> <li>CSS Anchor Positioning guide: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using">https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using</a></li> <li>Polyfill for Safari/Firefox: <a href="https://popover.oddbird.net/">https://popover.oddbird.net/</a></li> </ul> <h3 id="summary-ai-usage">AI usage (if applicable)</h3> <p>[x] AI Assisted Issue<br> This issue was generated with AI assistance, but was reviewed and refined by the creator.</p> <p>[ ] AI Assisted Code<br> This code was mainly generated by a human, with AI autocompleting or parts AI generated, but under full human supervision.</p> <p>[ ] AI Generated Code<br> This code was mainly generated by an AI with human guidance, and reviewed, tested, and refined by a human.</p> <p>[ ] Vibe Coded<br> This code was generated by an AI and has only been functionally tested.</p>
issue