Skip to content

docs: fix broken tooltip example #1564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
akashsonune wants to merge 1 commit into
base: main
Choose a base branch
from
+10 −10
Draft

docs: fix broken tooltip example #1564

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/app/examples/si-tooltip/si-tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,22 +123,22 @@ <h4>Other examples</h4>
A long time ago in a galaxy far, far away...
</button>
<si-tabset class="w-50">
<si-tab heading="Heading" icon="element-portfolio" siTooltip="Portfolio">
<p class="mt-4">Portfolio</p>
<si-tab heading="Favorites" icon="element-favorites" siTooltip="Your favorites">
<p class="mt-4">Favorites content</p>
</si-tab>
<si-tab
heading="Heading"
icon="element-portfolio-kpi"
siTooltip="Sustainability portfolio KPI"
heading="Notifications"
icon="element-alarm"
siTooltip="View notifications"
>
<p class="mt-4">Performance</p>
<p class="mt-4">Notifications content</p>
</si-tab>
<si-tab
heading="Heading"
icon="element-sustainability"
siTooltip="Sustainability portfolio"
heading="Settings"
icon="element-edit"
siTooltip="Adjust settings"
>
<p class="mt-4">Sustainability</p>
<p class="mt-4">Settings content</p>
</si-tab>
Comment on lines +126 to 142
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using both heading and siTooltip on an si-tab with an icon attribute causes two tooltips to be displayed on hover: the native browser tooltip from the title attribute and the custom si-tooltip. This is because the si-tab component uses the heading text to create a title attribute for the icon. This results in a poor user experience.

To resolve this and correctly demonstrate the siTooltip on a tab, I recommend removing the icon attribute from the si-tab elements. This will cause the heading to be displayed as text on the tab, and only the siTooltip will appear on hover.

        <si-tab heading="Favorites" siTooltip="Your favorites">
          <p class="mt-4">Favorites content</p>
        </si-tab>
        <si-tab
          heading="Notifications"
          siTooltip="View notifications"
        >
          <p class="mt-4">Notifications content</p>
        </si-tab>
        <si-tab
          heading="Settings"
          siTooltip="Adjust settings"
        >
          <p class="mt-4">Settings content</p>
        </si-tab>
References
  1. Avoid implementing solutions for scenarios that are not considered valid use cases, especially those leading to poor user experience like conflicting tooltips.

</si-tabset>
</div>
Expand Down
Loading