# highlightToolButton image and tool name changes

**URL:** <https://pdfjs.community/t/highlighttoolbutton-image-and-tool-name-changes/1665>\
**Category:** Technical Support\
**Created:** [May 10, 2022, 7:40am UTC](https://pdfjs.community/t/highlighttoolbutton-image-and-tool-name-changes/1665 "2022-05-10T07:40:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhiramsa3](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@Abhiramsa3](https://pdfjs.community/u/Abhiramsa3)\
**Post date:** [May 10, 2022, 7:40am UTC](https://pdfjs.community/t/highlighttoolbutton-image-and-tool-name-changes/1665/1 "2022-05-10T07:40:23Z")

</div>

**Which product are you using?**  
PDF.Js Express Js

**PDF.js Express Version**  
8.X.X

**Detailed description of issue**  
Need to change highlightToolButton name means (label) or img to my own image path, and tooltip to my own tool tip for ex: existing tooltip for ‘highlightToolButton’ is ‘Highlight’ to ‘someother text’.

**Expected behaviour**  
Need to change highlightToolButton name means (label) or img to my own image path, and tooltip to my own tool tip for ex: existing tooltip for ‘highlightToolButton’ is ‘Highlight’ to ‘someother text’.

**Does your issue happen with every document, or just one?**  
Yes

**Link to document**

**Code snippet**  
instance.UI.contextMenuPopup.update([  
{  
type: ‘actionButton’,  
label: ‘Annotate’,  
onClick: async () =\> {  
const xfdfString = await instance.Core.annotationManager.exportAnnotations();  
const xfdfString2 = await instance.Core.annotationManager.exportAnnotCommand();  
handleShow(xfdfString, xfdfString2);  
}  
},  
{  
type: ‘actionButton’,  
label: ‘Comments’,  
onClick: () =\> setShowSnippet(true)  
},  
{  
type: ‘actionButton’,  
img: ‘…/…/…/assets/elastic-elasticsearch-logo.png’,  
title: ‘Annotate’,  
dataElement: ‘highlightToolButton’  
}  
]);

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [May 10, 2022, 7:40am UTC](https://pdfjs.community/t/highlighttoolbutton-image-and-tool-name-changes/1665/3 "2022-05-10T07:40:27Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Hiding/Showing DOM elements in WebViewer UI - List of elements](https://pdfjs.express/documentation/ui-customization/hiding-elements#list-of-elements)
- [Customize toolbar in viewer - Header items - ToolGroupButton](https://pdfjs.express/documentation/ui-customization/customizing-header.8#toolgroupbutton)
- [Customize annotation tools - Extend built in tools](https://pdfjs.express/documentation/annotation/customizing-tools.8#extend-built-in-tools)

APIs:
- [Core.DocumentViewer - toolUpdated](https://pdfjs.express/api/Core.DocumentViewer.html#event:toolUpdated__anchor)
- [Core.Tools.TextUnderlineCreateTool - setName(name)](https://pdfjs.express/api/Core.Tools.TextUnderlineCreateTool.html#setName__anchor)
- [UI - updateTool(toolName [, properties])](https://pdfjs.express/api/UI.html#.updateTool__anchor)

Forums:
- [Highlight tool trigger as left click](https://pdfjs.community/t/highlight-tool-trigger-as-left-click/1664/1)
- [Highlight tool does not highlight the text completely](https://pdfjs.community/t/highlight-tool-does-not-highlight-the-text-completely/97/3)
- [Customizing “Text tools” group](https://pdfjs.community/t/customizing-text-tools-group/92/2)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 12, 2022, 4:05pm UTC](https://pdfjs.community/t/highlighttoolbutton-image-and-tool-name-changes/1665/4 "2022-05-12T16:05:08Z")

</div>

Hey there!

You can use the following code to update the image and tooltip:

```javascript
  instance.UI.updateElement('highlightToolGroupButton', {
    img: 'path/to/image',
    title: 'new_tooltip',
  })

```

Thanks,  
Logan