SfTab - How to Implement Tooltip on Tab Header

[Greg Wruck]

Hi,

I would like to implement tooltips on Tab Headers and have tried using the Tooltip Target property to have the tooltip be available on the TabItem HeaderTemplate named div.

Can you please let me know if this is the correct way of doing this?  Refer attached sample and video.

Attachment: SyncfusionBlazorApp26_TabHeaderTooltip_5ed51b11.zip

[Vijay Ravi]

Hi Greg,

Based on your requirement, we suggest you use the SfTooltip component within the headerTemplate to show the tooltip on hovering over the tab header. Refer the below highlighted code snippet. Let us know if you need any further assistance.

[index.razor]

<SfTab ID="tab" Height="250px" Width="550px">

    <TabItems>

        <TabItem >

            <HeaderTemplate>

                <SfTooltip Target="#tabitem1" Content="Tab1 Tooltip">

                </SfTooltip>

                <div id="tabitem1">Tab1</div>

            </HeaderTemplate>

            <ContentTemplate>

                <div>Content</div>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

[output screenshot]

Regards,

Vijay Ravi

[Greg Wruck]

Thanks, that solution will work.

[Ram Raju Elaiyaperumal]

Dear Greg Wruck,

We're glad to hear that the solution worked for you! If you have any more questions in the future, don't hesitate to ask.

Best regards,

Ram