This repository is intended for the development of a ToolTip in the form of a directive with dynamic values and with the possibility of adding functionalities.
Front-end: Angular, TypeScript
<Element appToolTip tooltip="tooltip" theme="theme" position="position" [delay]="10"><Element/>
-- tooltip: Text that will fill the tooltip.
-- delay: Delay to show content.
-- theme: Light or dark theme selector.
|_ dark & white.
-- position: Tooltip position referring to the component.
|_ top & bottom & left & right.
CSS Recommended:
.tooltip {
width: auto;
max-width: 250px;
position: absolute;
text-align: center;
font-size: 14px;
padding: 6px 10px;
border-radius: 4px;
line-height: initial;
z-index: 1000;
opacity: 0;
animation: 0.18s ease-out;
pointer-events: none;
&-dark {
color: white;
background: #202124;
}
&-white {
color: #5e5e5e;
background: white;
}
}
.tooltip-show {
opacity: 1;
}