Tooltip Module Name: TooltipModule
Module Name: TooltipModule
The tooltip is an overlay component service that can be used in any HTML element.
Showcase
Placement Top
<tl-input type="text" [tooltip]="{text: 'My tooltip', placement: 'top-center'}"></tl-input>
Placement Bottom
<tl-input type="text" [tooltip]="{text: 'My tooltip', placement: 'bottom-center'}"></tl-input>
Placement Right
<tl-input type="text" [tooltip]="{text: 'My tooltip', placement: 'right-center'}"></tl-input>
Placement Left
<tl-input type="text" [tooltip]="{text: 'My tooltip', placement: 'left-center'}"></tl-input>
Custom Background Color
<tl-input type="text" [tooltip]="{text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.', placement: 'top-center', color: '#CC181E', width: '320px'}"></tl-input>
Custom Font Color
<tl-input type="text" [tooltip]="{text: 'My tooltip', placement: 'bottom-center', color: '#167AC6', fontColor: '#fff' }"></tl-input>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
tooltip | Object | null | Receive a Object of configuration for Tooltip | text | placement | color | fontColor | width |
tooltip.color | string | #242525 | Hex Color for background color | Hex | RGBA |
tooltip.fontColor | string | #fff | Hex color for font color | Hex | RGBA |
tooltip.placement | string | left | Position place of the Tooltip | left-top | left-center | left-bottom | right-top | right-center | right-bottom | top-center | bottom-center |
tooltip.text | string | null | Receive the text itself | any text |
tooltip.width | string | 120px | Width of the Tooltip | px |