Foxit PDF SDK for Web

How to Customize the Floating Text Selection Tooltip with Foxit PDF SDK for Web

Customizing the floating tooltip involves two steps. First, you should create a custom controller to define your own logic for a target tool, and then add or edit the tool in fragments. The following sections will walk you through:

• A sample for creating a custom controller and modifying components by fragments
• The logic processing methods used in floating tooltip
• The component name of the floating tooltip 

A sample for creating a custom controller and modifying components by fragments

Refer to ~/examples/UIExtension/TooltipCustomization

The logic processing methods used in the floating tooltip

In some cases, when you modify the tooltip, you will most likely want to create your own controller to handle your tool. The code below shows commonly used methods to create a controller.

var tooltipLayer = this.component.getClosestComponentByType('tooltip-layer');
var textSelectionTool = tooltipLayer.getCurrentSelectionTool();
textSelectionTool.getSelectionInfo().then((selectionInfo)=>{
});
textSelectionTool.pageRender //The current rendering page object  

The getClosestComponentByType() is used to get the matched tooltip layer.
The
getCurrentSelectionTool() is used to get the text section tool object.
And the
getSelectionInfo() is called to obtain the selected text information and the current rendering page object. The obtained text information includes:

• page  // PDF page object
• text  // Text contents
rectArray //Text block (unit:point)

The component name of the floating tooltip

Component Name Description
fv–text-selection-tooltip The floating tooltip layer
fv–text-selection-tooltip-copy Copy tool
fv–text-selection-tooltip-create-highlight Highlight tool
fv–text-selection-tooltip-create-strikeout Strikeout tool
fv–text-selection-tooltip-create-underline Underline tool
Default text selection tooltip pane
Custom text selection tooltip pane

Updated on August 11, 2021

Was this article helpful?
Thanks for your feedback. If you have a comment on how to improve the article, you can write it here: