@cesarbr/angular-tooltip

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

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
   • Usage Flags
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

Built With

• Angular
• TypeScript
• SASS

Getting Started

To get a local and running follow these simple steps.

Prerequisites

Install NPM packages

1. npm

npm install npm@latest -g

Installation

1. With npm installed, run.

npm i @cesarbr/angular-tooltip

2. 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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature-IssueNumber)
3. Commit your Changes (git commit -m 'Create a new feature or fix bug')
4. Push to the Branch (git push origin feature-IssueNumber)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Project Link: https://github.com/CESARBR/angular-libraries