# 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 |