i4life-ng-tooltip ⚡

i4life-ng-tooltip is a simple and customizable tooltip component for Angular/Ionic projects. It provides an easy way to add tooltips to your elements, with control over positioning and appearance. Perfect for enhancing your UI without any hassle.

📦 Installation

1. Install the package:

npm install @i4life/i4life-ng-tooltip

2. Import the module in your AppModule (or any module):

import { i4lifeNgTooltipModule } from "@your-scope/i4life-ng-tooltip";

@NgModule({
  imports: [i4lifeNgTooltipModule],
})
export class YourDreamsModule {}

🔔 Important Note: If you're importing the library into a SharedModule (a module that declares and exports common components), make sure to also export the library module, or it won't work in the components that use the shared module.

✅ Example:

@NgModule({
  declarations: [...], //your shared components
  imports: [i4lifeNgTooltipModule],
  exports: [...,i4lifeNgTooltipModule], //must export the library module too
})
export class SharedModule {}

This ensures that any component or module importing your SharedModule will also have access to the tooltip directive.

⚙️ Usage

1. Add the tooltip directive to any element:

<div appTooltip="This is an incredible tooltip" appTooltipPosition="left">My incredible div</div>

2. Positioning: You can control the tooltip position using the appTooltipPosition attribute. Available positions:

• top
• bottom
• left
• right

Example:

<ion-button appTooltip="Tooltip on the right" appTooltipPosition="right"></ion-button>

3* Optional Set max width:

<ion-button appTooltip="This tooltip has a maximum width" appTooltipMaxWidth="200px"></ion-button>

🔧 Customization

You can customize the tooltip styles by modifying the .tooltip-box and .tooltip-arrow classes.

.tooltip-box {
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.tooltip-arrow {
  border-top: 7px solid #333;
}

📝 License

This project is intended for internal use. Feel free to use, fork or modify as needed.