Installation, Usage and Configuration
1. Installation
Step 1 — Install HoverScrollText
Install HoverScrollText from the OutSystems Forge into your ODC environment.
Step 2 — Open your ODC application
Open the application where you want to use the HoverScrollText component in ODC Studio.
Step 3 — Add the component as a dependency
Open Manage Dependencies.
Select the Source option.
Search for HoverScrollText.
Select the HoverScrollText library.
Select the HoverScrollText UI Block.
Click Apply.
The component is now available in your application.
Step 4 — Publish
Publish the application to make sure the dependency is correctly applied.
2. Basic Usage
The HoverScrollText component is a reusable UI Block.
Step 1 — Add the component
From the ODC Studio toolbox, locate the HoverScrollText block.
Drag and drop it onto your screen, table, container, or other UI element.
Step 2 — Set the text
Provide the text that you want to display in the component.
For example:
Neighbourhood-Scale CFD Simulation of Screen-Height Temperature Bias for the Siting of Low-Cost Air-Temperature Sensors
Step 3 — Configure the maximum width
Set the maximum width of the component.
Examples:
200px
50%
15rem
300px
When the text exceeds the available width, it remains contained within the configured width.
Step 4 — Run the application
Publish and open the application.
When the user moves the mouse over text that is longer than the available space, the text automatically scrolls horizontally to reveal the hidden content.
When the animation reaches the end, the text returns to its original position.
3. Configuration
HoverScrollText provides several parameters to control its behaviour.
Parameter Type Description
Text Text The text to display and scroll.
MaxWidth Text Maximum width of the component. Supports CSS units such as px, %, rem, etc.
ScrollSpeed Number Controls the speed of the horizontal scrolling animation.
StartDelay Number Delay before the scrolling animation starts when the user hovers over the text.
EndDelay Number Delay before the text returns to its original position after reaching the end.
Note: Parameter names should match the actual input names exposed by the HoverScrollText block.
4. Example — Table Cell
HoverScrollText is particularly useful for displaying long values in tables.
For example, instead of allowing a long thesis title to expand the table column:
Neighbourhood-Scale CFD Simulation of Screen-Height Temperature...
use HoverScrollText to keep the column compact while still allowing the complete title to be viewed.
Recommended configuration
Text = Thesis.Title
MaxWidth = 250px
ScrollSpeed = [your preferred value]
StartDelay = [your preferred value]
EndDelay = [your preferred value]
When the user hovers over the title, the complete text is revealed automatically.
5. Example — User Name
HoverScrollText can also be used for long names while maintaining a fixed layout.
Text = User.Name
MaxWidth = 180px
The component will only scroll when the content requires more space than the configured width.
6. Example — Search Results
For search results containing long descriptions or labels:
Text = SearchResult.Description
MaxWidth = 300px
This keeps the search results compact while allowing users to view the complete text when needed.
7. Recommended Configuration
For general-purpose usage, the following approach is recommended:
Use a fixed MaxWidth when the component is inside a table or other constrained layout.
Use responsive CSS units such as % when the component needs to adapt to its container.
Use a moderate scroll speed to keep the text easy to read.
Use a short StartDelay so the animation does not start immediately when the mouse briefly passes over the component.
Adjust EndDelay depending on how long you want the complete text to remain visible.
8. Responsive Usage
HoverScrollText supports CSS width units, allowing it to be used in responsive layouts.
100%
250px
20rem
When using %, the component will adapt to the width of its parent container.
9. Behaviour
The component follows this sequence:
Text is displayed at its starting position.
The user moves the mouse over the component.
The component waits for the configured StartDelay.
If the text exceeds the available width, horizontal scrolling starts.
The text continues scrolling until the complete content has been displayed.
The component waits for the configured EndDelay.
The text smoothly returns to its original position.
The component is ready for the next hover interaction.
If the text fits within the configured width, no scrolling animation is performed.
10. No Additional Setup Required
HoverScrollText does not require:
Database entities
Server actions
External services
Additional JavaScript libraries
Additional Forge dependencies
Install the component, add the dependency, place the block on your screen, and configure its inputs.
11. TroubleshootingThe component does not appear in Manage Dependencies
Make sure that:
HoverScrollText has been installed in your ODC environment.
You are using the correct ODC application.
The HoverScrollText library has been released with a version.
The component/block is marked as Public.
The text does not scroll
Check that:
The text is actually longer than the configured MaxWidth.
MaxWidth contains a valid CSS width value.
The component is being displayed inside a container with sufficient layout space.
The scroll speed is configured with a valid value.
The text is cut off
Check the MaxWidth value and the CSS/layout of the parent container.
The animation starts too quickly
Increase the StartDelay value.
The animation is too fast or too slow
Adjust the ScrollSpeed value until the text is comfortable to read.
12. Quick Start
For the simplest implementation:
Install HoverScrollText from Forge.
Open your ODC application.
Go to Manage Dependencies.
Add the HoverScrollText library and block.
Drag the HoverScrollText block onto your screen.
Set the Text input.
Set MaxWidth, for example 250px.
Optionally configure the scroll speed and delays.
Publish and test.
That's it — no additional configuration is required.