https://github.com/gustafguner/angular-tooltip

An easy-to-use Angular (6+) component for displaying tooltips
https://github.com/gustafguner/angular-tooltip

angular angular-component angular-library angular6 angular6-component angular6-library tooltip

Last synced: 3 months ago
JSON representation

An easy-to-use Angular (6+) component for displaying tooltips

• Host: GitHub
• URL: https://github.com/gustafguner/angular-tooltip
• Owner: gustafguner
• License: mit
• Created: 2018-08-16T15:36:49.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T07:19:25.000Z (over 6 years ago)
• Last Synced: 2024-10-13T01:01:37.671Z (4 months ago)
• Topics: angular, angular-component, angular-library, angular6, angular6-component, angular6-library, tooltip
• Language: CSS
• Homepage: https://gustafguner.github.io/angular-tooltip/
• Size: 699 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular-components - gustafguner/angular-tooltip - An easy-to-use Angular (6+) component for displaying tooltips (UI Components / Tooltip)

README

        
# angular-tooltip

An easy-to-use Angular (6+) component for displaying tooltips.

## Check it out in action

[Here](https://gustafguner.github.io/angular-tooltip/)

## Installation

Install it via NPM

```shell

npm install --save @gustafguner/angular-tooltip

```

Then import the `AngularTooltipModule` and add it to `imports` in your `AppModule`.

```javascript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AngularTooltipModule } from '@gustafguner/angular-tooltip';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AngularTooltipModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

## Usage

### Basic usage

In order to use `angular-tooltip` you only have to wrap the component `` around the element that you want to attach a tooltip to. The following example demonstrates how to add a tooltip to an `` element.


```html

  Hover me

```

The attribute `tooltip-text` controls the text content of the tooltip. The attribute `tooltip-direction` controls in which direction the tooltip will appear. `tooltip-direction` can be set to either `top`, `right`, `bottom` or `left`.