Ninety Percent Muffin

    ngx-tooltip-server
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    ngx-tooltip-server

    This is a fork of pleerock/ngx-tooltip, but with server-side rendering support.

    Simple tooltip control for your Angular applications using bootstrap3. Does not depend of jquery. If you want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.

    Angular tooltip

    Installation

    $ npm i --save-dev ngx-tooltip-server

    or

    $ yarn add ngx-tooltip-server

    Usage

    Example of simple usage:

    <span
      tooltip
      content="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:

    <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 content="myTooltip">element on which this tooltip is applied.</button>
    • <span tooltip>:
      • tooltip Activates the directive.
      • content="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".

    Sample

    import { Component } from "@angular/core";
    import { TooltipModule } from "ngx-tooltip-server";
     
    @Component({
      selector: "app",
      template: `
        <div class="container">
          <!-- regular tooltip -->
          <p>
            It is a long established <span tooltip content="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 content="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 content="various, but not all" tooltipPlacement="right"><b>Various versions</b></span> have evolved over the years, sometimes by accident, <span tooltip content="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 for more examples of usages.

    Keywords

    none

    Install

    npm i ngx-tooltip-server

    DownloadsWeekly Downloads

    56

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    134 kB

    Total Files

    16

    Last publish

    Collaborators

    • jpeer