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