Tooltip - Angular 5

El uso es bastante sencillo. Solo se necesita agregar el atributo "title" a un elemento HTML.

Se debe agregar las siguiente líneas de estilo a su archivo principal de estilos.

Se requiere:

• jQuery

your-file-of-styles.css

.simple-tooltip{
    font-size: 9px;
    color: white;
    background-color: black;
    display: block;
    z-index: 99999;
    position: absolute;
    border-radius: 5px;
    padding: 4px 5px 3px 5px;
    max-width: 250px;
    width: auto;
    line-height: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
.simple-tooltip:before{
    content: ' ';
    display: block;
    background-color: black;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    margin-top: -6px;
    margin-left: 2px;
}

Como usar:

your-app.module.ts

import { Component } from "@angular/core";
import { TooltipDirective } from 'simple-tooltip-directive';

@Component({
    selector: "app",
    template: `
        <button type="text" title="Mensaje de prueba...">
            MouseOver
        </button>
    `
})
export class App {

}

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

}

Gracias por utilizar esta librería. Creado por: Jimmy Castellanos