# ngx-tooltip-gesellix

> Simple tooltip control for your angular applications using bootstrap3.

Latest version **0.0.14** (published 2017-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-tooltip-gesellix
pnpm add ngx-tooltip-gesellix
yarn add ngx-tooltip-gesellix
bun add ngx-tooltip-gesellix
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2017-04-07 |
| First published | 2017-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Umed Khudoiberdiev |
| Maintainers | gesellix |

## Links

- npm: https://www.npmjs.com/package/ngx-tooltip-gesellix
- Repository: https://github.com/gesellix/ngx-tooltip
- Homepage: https://github.com/gesellix/ngx-tooltip#readme
- Issues: https://github.com/gesellix/ngx-tooltip/issues
- npm.io page: https://npm.io/package/ngx-tooltip-gesellix

## Recent versions

- 0.0.14 (latest) — 2017-04-07
- 0.0.13 — 2017-04-07
- 0.0.12 — 2017-04-07
- 0.0.11 — 2017-04-07
- 0.0.10 — 2017-04-07

## README

> This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.

# ngx-tooltip

Simple tooltip control for your [Angular](https://angular.io/) applications using [Bootstrap 3](http://getbootstrap.com/). Does not depend of [jQuery](https://jquery.com/).
If you want to use it without Bootstrap - simply create proper css classes. Please star the project if you liked it or create an issue if you have problems with it.

![angular 2 tooltip](./resources/tooltip-example.png)

## Installation

1. Install npm module:

    `npm install ngx-tooltip --save`

2. If you are using system.js you may want to add this into `map` and `package` config:

    ```json
    {
        "map": {
            "ngx-tooltip": "node_modules/ngx-tooltip"
        },
        "packages": {
            "ngx-tooltip": { "main": "index.js", "defaultExtension": "js" }
        }
    }
    ```

## Usage

Example of simple usage:

```html
<span tooltip="content to be shown in the tooltip"
      [tooltipDisabled]="false"
      [tooltipAnimation]="true"
      tooltipPlacement="top">
    element on which this tooltip is applied.
</span>
```

Example of usage with dynamic html content:

```html
<tooltip-content #myTooltip [animation]="true" placement="left">
    <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
    <b><i><span style="color: #ffc520">Tooltip With</span></i></b> <small>Html support</small>.
</tooltip-content>

<button [tooltip]="myTooltip">element on which this tooltip is applied.</button>
```

* `<span tooltip>`:
    * `tooltip="string"` The message to be shown in the tooltip.
    * `[tooltipDisabled]="true|false"` Indicates if tooltip should be disabled. If tooltip is disabled then it will not be shown. Default is **false**
    * `[tooltipAnimation]="true|false"` Indicates if all tooltip should be shown with animation or not. Default is **true**.
    * `tooltipPlacement="top|bottom|left|right"` Indicates where the tooltip should be placed. Default is **"bottom"**.
* `<tooltip-content>`:
    * `[animation]="true|false"` Indicates if all tooltip should be shown with animation or not. Default is **true**.
    * `placement="top|bottom|left|right"` Indicates where the tooltip should be placed. Default is **"bottom"**.
    * `[backgroundColor]="hex | rgb | rgba"` Sets the tooltip's background color. You can pass a string about this color as hexadecimal, rgb or rgba, such as '#0C852B' or 'rgb(12,133,43)'".

## Sample

```javascript
import {Component} from "@angular/core";
import {TooltipModule} from "ngx-tooltip";

@Component({
    selector: "app",
    template: `
<div class="container">

    <!-- regular tooltip -->
    <p>
        It is a long established <span tooltip="Hello fact!"><b>fact</b></span> that a reader will be distracted by the readable content of a page when looking at its layout.
        The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
        <span tooltip="many, but not all" tooltipPlacement="left"><b>Many desktop</b></span> publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
        <span tooltip="various, but not all" tooltipPlacement="right"><b>Various versions</b></span> have evolved over the years, sometimes by accident, <span tooltip="another hint" tooltipPlacement="top"><b>sometimes on purpose</b></span> (injected humour and the like)
    </p>

    <!-- tooltip with dynamic html content -->
    <div>
        <tooltip-content #myTooltip>
            <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
            <b><i><span style="color: #ffc520">Tooltip With</span></i></b> <small>Html support</small>.
        </tooltip-content>

        <button [tooltip]="myTooltip">hover this button to see a tooltip</button>
    </div>

</div>
`
})
export class App {

}

@NgModule({
    imports: [
        // ...
        TooltipModule
    ],
    declarations: [
        App
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {

}
```

Take a look on samples in [./sample](https://github.com/pleerock/ngx-tooltip/tree/master/sample) for more examples of
usages.

---
_Source: https://npm.io/package/ngx-tooltip-gesellix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._