Community › Forge › Assets list › Simple Tooltip
simple-tooltip
Reactive icon

Simple Tooltip

Stable version 1.1.1 (Compatible with OutSystems 11)
Uploaded
 on 26 April 2024
 by 
5.0
 (3 ratings)
simple-tooltip

Simple Tooltip

Documentation
1.1.1

The Simple Tooltip Forge Component was updated to version 1.1.1.

On this new version, you will find:

  • Added license file for Hint.css


How to add a simple tooltip to an HTML element:

  1. Place the block SimpleTooltip after the HTML element you want to display a tooltip
  2. Set all the input parameters accordingly:
    • WidgetId - runtime id of te HTML element to display a tooltip
    • TooltipContent - the tooltip content to display
    • Position - select one of the options from TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight (defaults to Top)
    • BackgroundColor - select one of the options from Default, Error, Warning, Info, Success (defaults to Default)
    • Size - select one of the options from Small, Medium, Large (defaults to Medium)
    • UseRoundedCorners - when set to True, the tooltip content cornes will be rounded (defaults to True)
    • UseAnimation - when set to True, the rendering of the tooltip content will have a small animation effect (defaults to True)
    • AlwaysVisible - when set to True, the tooltip content will remain visible oon the page (defaults to False)
    • HideTooltipArrow - when set to True, the tooltip arrow will he hidden (defaults to False)


You can play with this pattern on the Demo, where you can see the multiple settings in action.


1.1.0

The Simple Tooltip Forge Component was updated to version 1.1.0.

On this new version, you will find:

  • Removed the dependency for Outsystems UI


No changes were made to the widgets available.


1.0.4

The Simple Tooltip Forge Component was updated to version 1.0.4.

On this new version, you will find:

  • Updated references for Outsystems UI version 2.10.0
  • A Demo package is now included on the Forge Component


No changes were made to the widgets available.


1.0.2

A simple lightweight Tooltip pattern, based on Hint.css 2.0, available on https://kushagra.dev/lab/hint/ 

Main features include:

  • Simple CSS with minimalistic Javascript
  • Easy to use
  • No config required
  • Supports Accessibility with aria-label attributes
  • Works in all modern browsers


You can play with this pattern on the Demo, where you can see the multiple settings in action.

Simply drag the pattern to an area on your Page or Block, and set all the necessary input parameters, mainly the runtime id of the widget that will display the tooltip.