docs: fix broken tooltip example

[akashsonune]

Describe in detail what your merge request does and why. Add relevant
screenshots and reference related issues via Closes #XY or Related to #XY.

---

• I confirm that this MR follows the contribution guidelines.

[gemini-code-assist]

Code Review

This pull request updates a tooltip example to use more meaningful content. My review identifies a user experience issue where using tabs with icons along with the siTooltip directive results in displaying two tooltips. I've provided a suggestion to fix this by removing the icons from the tabs, which allows the siTooltip to be demonstrated correctly without the conflicting native tooltip. This aligns with the guideline to avoid problematic or invalid use cases.

[gemini-code-assist]

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.