How to customize the text selection tooltip

Technical Support
1

PDF.js Express Version
6.2.1
Detailed description of issue

tooltip
tooltip1920×1080 83.9 KB

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

2

Hey,

You can add an actionButton to the textPopup menu like so:

  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

3

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.

4

Hi,

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

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.