# How to customize the text selection tooltip

**URL:** <https://pdfjs.community/t/how-to-customize-the-text-selection-tooltip/622>\
**Category:** Technical Support\
**Created:** [March 17, 2021, 2:54pm UTC](https://pdfjs.community/t/how-to-customize-the-text-selection-tooltip/622 "2021-03-17T14:54:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tapas.baditya](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@tapas.baditya](https://pdfjs.community/u/tapas.baditya)\
**Post date:** [March 17, 2021, 2:54pm UTC](https://pdfjs.community/t/how-to-customize-the-text-selection-tooltip/622/1 "2021-03-17T14:54:26Z")

</div>

**PDF.js Express Version**  
6.2.1  
**Detailed description of issue**

 ![tooltip](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/2f04f173353ee22c8bb35b1915776f3dadd2dc7b.png)  
Hi,  
We need to customize the text selection tooltip. We need to add one more action/option in that. So How can we do that. Please provide guidelines regarding that.  
Thanks!

**Expected behaviour**

**Link to document**  
any

**Code snippet**

---

<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:** [March 17, 2021, 3:13pm UTC](https://pdfjs.community/t/how-to-customize-the-text-selection-tooltip/622/2 "2021-03-17T15:13:19Z")

</div>

Hey,

You can add an [`actionButton`](https://pdfjs.express/documentation/ui-customization/customizing-header) to the [`textPopup`](https://pdfjs.express/api/WebViewerInstance.html#textPopup__anchor) menu like so:

```javascript
  instance.textPopup.add({
    type: 'actionButton',
    onClick: () => console.log('test'),
    img: '' // this can be a path to an image, or an SVG as a string
  })

```

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![tapas.baditya](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@tapas.baditya](https://pdfjs.community/u/tapas.baditya)\
**Post date:** [March 18, 2021, 12:06pm UTC](https://pdfjs.community/t/how-to-customize-the-text-selection-tooltip/622/3 "2021-03-18T12:06:52Z")

</div>

Hi, Thanks a lot.  
But can you please share me how to get the instance and where the event generating after selected some text.  
Means where i need to add the code given by you.

---

<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:** [March 18, 2021, 2:48pm UTC](https://pdfjs.community/t/how-to-customize-the-text-selection-tooltip/622/4 "2021-03-18T14:48:27Z")

</div>

Hi,

The instance comes from the promise returned by the initialization function.

```javascript
import WebViewer from '@pdftron/pdfjs-express'

WebViewer({
   ...options
}).then(instance => {

   instance.textPopup.add({
    type: 'actionButton',
    onClick: () => console.log('test'),
    img: '' // this can be a path to an image, or an SVG as a string
  })

})

```

You can just call that code as soon as WebViewer is done initializing.