We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Edit tooltip button with hyperLink in toolbar


I use in spreadsheet and need to do tooltip on button in toolbar.

How can I edit it, to do the tooltip sticky, part of the text hypeLink- the user can click on it.

(I tried to do it in "tooltipText" of toolbarItem, but I could't edit it)

1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team December 16, 2022 03:37 PM UTC

Hi Dov,

Greetings from Syncfusion support.





How can I edit

Based on your request, we have created an Angular Tooltip Sample with the Spreadsheet component. Currently, we don’t have a direct support to edit the Tooltip content. However, you can update the content of the Tooltip by using any of our inbuilt event.


Here, we have a custom button inside the Spreadsheet Toolbar and appended the Tooltip for the button. Using a button click, we updated the Tooltip content. For your reference, we included the sample in the latest version(V20.1.61).


Check out the below mentioned code Snippets and sample.


Sample : https://stackblitz.com/edit/angular-7rnpaa-sa2xmb?file=app.component.ts,app.component.html



<button (click)="onClicked()">Update Tooltip</button> <br /><br />

<ejs-tooltip #tooltip id="showTooltip" opensOn="Hover" target="#customButton" position="BottomCenter" content="Custom Tooltip">

  <div class="control-section">

    <ejs-spreadsheet class="spreadsheet" #default ... (created)="created()" >







{ ...

    this.spreadsheetObj.addToolbarItems('Home',[{ type: 'Separator' }, { text: 'Custom', id: 'customButton' }],6);



onClicked() {

    this.control.content = 'Tooltip Content changed';



Tooltip sticky

By enabling the isSticky property and setting the value to true, you can display the Tooltip in an open state until you close it manually.


Check out the below mentioned links for your assistance.


Documentation : https://ej2.syncfusion.com/documentation/tooltip/open-mode/#sticky-mode



<ejs-tooltip #tooltip id="showTooltip" opensOn="Hover" target="#customButton" isSticky="true” content="Custom Tooltip">




Part of the text hypeLink

You can meet your requirement, by using Tooltip Template support. By default, any text or image can be added to the Tooltip. To customize the Tooltip layout or to create your own visualized element on the Tooltip, template can be used. Check the below included sample.


Sample : https://stackblitz.com/edit/angular-7rnpaa-sa2xmb?file=app.component.ts,app.component.html



<ejs-tooltip #tooltip id="showTooltip" opensOn="Hover" target="#customButton">

    <ng-template #content>


            <a rel='nofollow' href=https://en.wikipedia.org/wiki/Eastern_bluebird target="_blank">Eastern Bluebird</a>






Check out the below mentioned links to know more about Tooltip component.


Documentation : https://ej2.syncfusion.com/documentation/tooltip/content/#template-content


Demo : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/template


API : https://ej2.syncfusion.com/angular/documentation/api/tooltip#properties



Leo Lavanya Dhanaraj

Live Chat Icon For mobile
Up arrow icon