Edit tooltip button with hyperLink in toolbar

[DOV SHECHTER]

hi,

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)

[LeoLavanya Dhanaraj]

Hi Dov,

Greetings from Syncfusion support.

S.No	Query	Solution
1	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   [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()" >       ...     </ejs-spreadsheet>   </div> </ejs-tooltip> [app.component.ts] created() { ...     this.spreadsheetObj.addToolbarItems('Home',[{ type: 'Separator' }, { text: 'Custom', id: 'customButton' }],6); }   onClicked() {     this.control.content = 'Tooltip Content changed'; }
2	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   [app.component.html] <ejs-tooltip #tooltip id="showTooltip" opensOn="Hover" target="#customButton" isSticky="true” content="Custom Tooltip">     ... </ejs-tooltip>
3	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   [app.component.html] <ejs-tooltip #tooltip id="showTooltip" opensOn="Hover" target="#customButton">     <ng-template #content>         <p>Custom             <a rel='nofollow' href=https://en.wikipedia.org/wiki/Eastern_bluebird target="_blank">Eastern Bluebird</a>         </p>     </ng-template>   ... </ejs-tooltip>   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

Regards,

Leo Lavanya Dhanaraj