Tooltip directive designed for Angular and Ionic/Angular applications.
npm install @duyvu-fsdev/ng-tooltip-directivebash
npm install @duyvu-fsdev/ng-tooltip-directive
`
$3
#### _using the --legacy-peer-deps flag:_
`bash
npm install @duyvu-fsdev/ng-tooltip-directive --legacy-peer-deps
`
Usage
1. Import the module
##### Add TooltipModule to your module:
`typescript
/ .module.ts */
import { TooltipModule } from '@duyvu-fsdev/ng-tooltip-directive';
@NgModule({
imports: [..., TooltipModule],
})
export class YourModule {}
`
2. Add the tooltip to your template
##### Template Example:
`html
/ .html */
`
##### TypeScript Example:
`typescript
// *.ts
import { Option } from '@duyvu-fsdev/ng-tooltip-directive';
...
export class YourComponent {
...
tooltipOption: Option = {
position: 'bottom',
text: 'Hello, this is a tooltip!',
class: 'custom-tooltip'
};
}
`
##### Option Interface
| Property | Type | Default | Description | Example |
| ---------- | ---------------------------------------------------- | :--------: | -------------------------------------------- | ------------------------ |
| position | 'top' \| 'bottom' \| 'left' \| 'right'\| undefined | 'bottom' | Position of the tooltip relative to the host | 'bottom' |
| text | string | '' | Tooltip text content | 'Tooltip text content' |
| class | string | '' | CSS class for custom styling | 'custom-tooltip' |
CSS Configuration
#### 1. Customize the variables to apply to all tooltips in the application
`scss
/ global.scss /
.app-tooltip {
--tooltip-background: #fff;
--tooltip-color: #000;
--tooltip-border-radius: 4px;
--tooltip-padding: 8px;
--tooltip-max-width: 200px;
--tooltip-height: auto;
}
`
#### 2. Customize for an individual tooltip using a custom class - e.g., "custom-tooltip"
`typescript
tooltipOption: Option = {
...
class: 'custom-tooltip' / Custom class for styling /
};
`
`scss
/ global.scss /
.app-tooltip.custom-tooltip {
--tooltip-background: #fff;
--tooltip-color: #000;
--tooltip-border-radius: 4px;
--tooltip-padding: 8px;
--tooltip-max-width: 200px;
--tooltip-height: auto;
}
`
##### You can also apply other custom styles using a custom class
`scss
/ global.scss /
.custom-tooltip {
background: #f00 !important;
color: #fff !important;
padding: 10px !important;
border-radius: 8px !important;
}
`
##### Additionally, to avoid cases where the tooltip may not display correctly for elements like span, h1, etc., you should set box-sizing for the host-element.
`scss
.host-element-css {
box-sizing: border-box;
}
`
Or set box-sizing for all elements in your project (recommended):
`scss
/ global.scss /
* {
box-sizing: border-box;
}
``