@cesarbr/angular-tooltip
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

Contributors Forks Stargazers Issues MIT License


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

About The Project

GIF demo

Built With

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

Readme

Keywords

Package Sidebar

Install

npm i @cesarbr/angular-tooltip

Weekly Downloads

16

Version

0.1.6

License

MIT

Unpacked Size

279 kB

Total Files

26

Last publish

Collaborators

  • isac_aniceto
  • ramonhpr
  • jneto
  • felipeborgiani
  • brunolimawd
  • rodrigoperazzo
  • felipe-ferraz
  • cgsilva