Ngx-tooltip-selectable NPM

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.
It is a fork of ngx-tooltip of Umed Khudoiberdiev made by me for my specific case.

ngx-tooltip-selectable

Simple tooltip control for your angular2 applications using bootstrap3. Does not depend of jquery. If you want to use it without bootstrap - simply create proper css classes.

Installation

Install npm module:
npm install ngx-tooltip --save

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

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

Usage

Example of usage with dynamic html content (the only way for now):

<tooltip-content #myTooltip 
[animation]="true" 
[hideTimeoutMs]="150"
placement="left"
[changeSize]="expandedTooltip"
(clickOutside)="tooltipVisibility={value: false, clickOutside: true}"
>
    <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"
         [tooltipPlacement]="tooltipPosition"
         [visibility]="tooltipVisibility" 
         [keepOnMouseHover]="false"
>element on which this tooltip is applied.</button>

<span tooltip>:
- tooltip="tamplateID" templateID of tooltip-content container to be shown in the tooltip.
- [visibility]="boolean" Manually show/hide tooltips in some specific cases.
- [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 will have animation class from bootstrap applied 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 bootstrap animation or not. Default is true. Possibly will be Deprecated soon.
- placement="top|bottom|left|right" Indicates where the tooltip should be placed. Default is "bottom".
- [hideTimeoutMs]="150" Indicates tooltip auto-hide timespan after mouse-leaving of tooltip area. Default is "150".
- [keepOnMouseHover]="false" Switchs on and off tooltip keeping being displayed on its area mouse hover (and text copy). Default is "true".
- [changeSize]="variable" If you plan to place some cotrols on tooltip area that change its size - then you should feed some variable change (from false to true and vice-versa) in this INPUT to recalculate tooltip position.
- [correctionAbsolute]="variable" Turn off absolute positioned tooltip calculation (use to correct top and left coordinates to fit parent borders).
- (clickOutside)="tooltipVisibility={value: false, clickOutside: true}" . Since you are able to copy text from tooltip area and change its size - then auto-hiding is disabled after size-change of tooltip - use (clickOutside) to hide tooltip (clickOutside is not part of the module, install it by yourself separately)
- (tooltipOnMouseEnter)="handler()" . Handle mouseenter event for tooltip element.
- (tooltipOnMouseLeave)="handler()" . Handle mouseleave event for tooltip element.

Sample

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

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

    <div class="tooltip-spot"
         [tooltipPlacement]="tooltipPosition"
         [tooltip]="myTooltip"
         [visibility]="tooltipVisibility"
         (mouseenter)="tooltipVisibility=true"
         (mouseleave)="tooltipVisibility=false"
    >
    </div>

    <tooltip-content #myTooltip class="tooltip-area"
                     [ngClass]="{expanded: expandedTooltip}"
                     (clickOutside)="tooltipVisibility={value: false, clickOutside: true}"
                     [hideTimeoutMs]="250"
                     [changeSize]="expandedTooltip">
        <div class="base-info" >
            Main info {{variable}}
        </div>
        <div *ngIf="expandedTooltip">
            More info {{moreINfoVariable}}
        </div>

        <button class="expand-button" (click)="expandedTooltip=!expandedTooltip">More info...</button>
    </tooltip-content>

</div>
`
})
export class App implements {
    
    public tooltipPosition: string = 'bottom';
    public tooltipVisibility: {value: boolean, clickOutside?: boolean} = {value: false};
    public expandedTooltip: boolean = false;

}

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

}

*One more note - tooltip-content component apply 'tooltip' class on its template wrapper div. You can set css rules to this class. And don't forget "position: absolute" since I've tested it only with this positioning.

Publishing

Make a fork on github
npm install
npm install
Do the changes (src, README.md and package.json) and then publish:
gulp publish

Development

Build the package:
gulp publish
go to package dir:
cd ./build/package
Run 'npm link' in that dir
Go to your project root dir and run 'npm link ngx-tooltip-selectable'
Now to can import this module to your NG2 app.
In case of any changes in module - just run step 1 again (sometimes steps 2 and 3 if smth)