0.0.4 • Published 6 months ago
ngl-tooltip v0.0.4
NglTooltip for Angular App
It's a highly customizable and simple tooltip. You can use component, template or DOM element to display tooltip content.
Installation
Install the ngl-tooltip
npm package.
npm install ngl-tooltip
Import NglTooltipModule.
import { NglTooltipModule } from 'ngl-tooltip';
@NgModule({
imports: [NglTooltipModule]
})
Import tooltip.css
@import '~ngl-tooltip/styles/tooltip.css';
Basic Usage
You can pass text content right to directive, so it can be shown when you hover applied directive element.
<button nglTooltip="Tooltip" type="button">Hover me!</button>
With the component
You're able to show component on a tooltip with it's data.
Firstly, create component and inject the tooltip data via NGL_TOOLTIP_DATA
.
import { NGL_TOOLTIP_DATA } from 'ngl-tooltip';
@Component({
template: '<p class="tooltip-text">{{ tooltipData }}</p>',
styles: ['.tooltip-text { color: green }'],
})
export class CustomTooltipComponent {
constructor(@Inject(NGL_TOOLTIP_DATA) public tooltipData: string) {}
}
Secondly, pass your component to nglTooltipContent
and tooltip data.
<button type="button" nglTooltip="Tooltip" [nglTooltipContent]="tooltipComponent">Hover me!</button>
With the template
Pass the template to render it on the tooltip.
<button type="button"
[nglTooltip]="{ text: 'Tooltip template!' }"
[nglTooltipContent]="tooltipTemplate"
>
Hover me!
</button>
<ng-template #tooltipTemplate let-text="text">
<span>{{ text }}</span>
</ng-template>
With the DOM element
Create DOM element
div = document.createElement('div');
Pass element to the tooltip directive
<button type="button" [nglTooltip] [nglTooltipContent]="div">Hover me!</button>
Customization
You can override default tooltip css variables
:root {
--ngl-tooltip-text-color: #fff;
--ngl-tooltip-background-color: #383838;
--ngl-tooltip-padding: 7px 8px 9px 8px;
--ngl-tooltip-border-radius: 3px;
--ngl-tooltip-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Apple Color Emoji, Helvetica, Arial,
sans-serif, Segoe UI Emoji, Segoe UI Symbol;
--ngl-tooltip-font-size: 12px;
}