Spurious tooltip pointer

[Peter]

Hi

Using Blazor Server app using SyncFusion 18.4.0.43.

I've spent ages trying to customise the look of the tooltip that I want and am nearly there. However, as shown in the attached screen shot (zoomed in for clarity) I have a

black spurious pointer. The white background of the tooltip and its pointer are correct and what's required but I can't figure out where the black pointer is coming from.

My razor page is also attached which shows the CSS I'm using. I'd be grateful if you could help me get rid of the spurious black pointer.

For people like me who only have a basic knowledge of CSS I have found the Tooltip particularly hard to use. If you're interested, the CSS Structure in your documentation would benefit from a diagram that labels all the components of the tooltip box and its pointer and the CSS selectors relevant to those components.

Thanks

Peter,

Attachment: Ghost_Pointer_Files_283708a4.zip

[Sharon Sanchez Selvaraj]

  

Hi Peter, 

Thanks for contacting Syncfusion Support. 

We have checked with your query. Please add the following CSS to your sample to resolve the issue. 

   .e-arrow-tip-inner.e-tip-top::before { 

            color: #fff; 

 

        } 

 

Please check with the below documentation to know more about CSS structure in Tooltip component. 

https://blazor.syncfusion.com/documentation/tooltip/style/#customizing-the-tooltip 

Please check with  the below links to know more about Tooltip component. 

Demo: https://blazor.syncfusion.com/demos/tooltip/default?theme=bootstrap4 

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html 

Please get back to us if you need any further assistance. 

Regards, 

Sharon Sanchez S. 

[Peter]

Sharon

Thanks for your response.  I've added the following CSS to my razor page as you've suggested but all that has done is change the color of the spurious pointer from black to white:

.e-arrow-tip-inner.e-tip-top::before {
                color: #fff;
            }

The attached zip file contains an updated screen shot of the tool tip with the small, now white, spurious pointer and my razor file which contains the CSS.  Can you help me get rid of the spurious pointer please.  Thanks.

Peter,

Attachment: Ghost_Tooltip_Pointer_439e7ddb.zip

[Sharon Sanchez Selvaraj]

Hi Peter, 

We have checked with your reported query. 

Please add the following CSS to achieve your requirement. 

.e-arrow-tip-inner.e-tip-top::before { 

            visibility:hidden; 

        } 

When setting the visibility to hidden state, the required scenario can be achieved. 

Please get back to us if you need further assistance. 

Regards, 

Sharon Sanchez S 

[Peter]

Shaon

Problem solved with your latest CSS!

Thanks for your help.

Peter,

[Keerthana Rajendran]

Hi Peter, 

 

Most welcome. Please get back to us if you need further assistance. We will be happy to assist you. 

. 

Regards, 

Keerthana.