Foxit PDF SDK For Web - V9.2.1

# Customize the Floating Text Selection Tooltip

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 on 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 fragmentation

Code sample can be accessed on /examples/UIExtension/custom-text-selection-tool.

# The logic processing methods used in floating tooltip

In some cases,when you modify the tooltip, you will most likely want to create your own controller to handler 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 selection 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

← Customize Internationalization Resources →