Angular Tooltip
Tooltip directive adds a behavior to elements in your Angular applications where you can add a tooltip
when hover the elements
Report Bug
·
Wiki
Table of Contents
About The Project
Built With
Getting Started
To get a local and running follow these simple steps.
Prerequisites
Install NPM packages
- npm
npm install npm@latest -g
Installation
- With npm installed, run.
npm i @cesarbr/angular-tooltip
- Verify if tooltip is added on your dependencies
"dependencies": {
...
"@cesarbr/angular-tooltip": "^0.1.6"
...
}
Usage
Import TooltipModule on module
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TooltipModule } from '@cesarbr/angular-tooltip';
@NgModule({
declarations: [AppComponent],
imports: [TooltipModule],
providers: [],
bootstrap: []
})
export class AppModule { }
Using the directive on your component
<div tooltip="Example tooltip" placement="top">My tooltip host!</div>
Usage Flags
Angular Tooltip has flags where you can customize your component:
Usage | Flag | Default | Values | Type |
---|---|---|---|---|
Tooltip orientation. | placement |
left |
`left | top |
Margin between the tooltip and it's host. | offset |
8 |
0...99999 |
number |
Horizontal tooltip position, positive numbers will push it to the left, while negative numbers will push it to the right | leftOffset |
0 |
-99999...99999 |
number |
Vertical tooltip position, positive numbers will push it down, while negative numbers will push it up. | topOffset |
0 |
-99999...99999 |
number |
Allows for breaking lines withing the same word. | wordBreak |
none |
Any string |
string |
Only shows the tooltip if the text is overflowed (not entirely showing up, with '...'). | showOnlyIfOverflowEllipsis |
false |
`true | false` |
Text color. | textColor |
black |
Any string |
string |
Background color. | backgroundColor |
white |
Any string |
string |
Usage example
<div tooltip="{{tooltipExample}}"
placement="top"
offset="10"
leftOffset="30"
topOffset="23"
wordBreak="Cut"
textAlign="right"
showOnlyIfOverflowEllipsis="true"
textColor="black"
backgroundColor="white">
<button class="upload-button">
Upload Documents
</button>
</div>
Roadmap
See the open issues for a list of proposed features (and known issues).
Contributing
You can set up a test enviroment by running the command npm run build-watch followed by ng serve, the build-watch command will build the tooltip and watch for code changes, ng serve will run the test project with the lib.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature-IssueNumber
) - Commit your Changes (
git commit -m 'Create a new feature or fix bug'
) - Push to the Branch (
git push origin feature-IssueNumber
) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE
for more information.
Contact
Project Link: https://github.com/CESARBR/angular-libraries