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
NameTypeDefaultDescriptionOptions
tooltipObjectnullReceive a Object of configuration for Tooltip text | placement | color | fontColor | width
tooltip.colorstring#242525Hex Color for background color Hex | RGBA
tooltip.fontColorstring#fffHex color for font color Hex | RGBA
tooltip.placementstringleftPosition place of the Tooltip left-top | left-center | left-bottom | right-top | right-center | right-bottom | top-center | bottom-center
tooltip.textstringnullReceive the text itself any text
tooltip.widthstring120pxWidth of the Tooltip px