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|bottom|right|string| |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|boolean| |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