3

Angular2 (2.0.0-rc.4) I use Bootstrap's Tooltip, Tooltip need execute follow javascript when ready:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

In Angular2,how to execute it?

2 Answers 2

2

That worked for me:

import { Directive, ElementRef, Input, HostListener, OnDestroy } from '@angular/core';

declare var $: any;

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective implements OnDestroy {


  @Input()
  public appTooltip: string;

  constructor(private elementRef: ElementRef) { }

  @HostListener('mouseenter')
  public onMouseEnter(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('show');
  }

  @HostListener('mouseleave')
  public onMouseLeave(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('dispose');
  }


ngOnDestroy(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('dispose');
  }

}

registering:

  1. Importing it in in app.module.ts
  2. Adding it in declarations on @NgModule (file app.module.ts)

And using it like this:

<button title="tooltip tilte" [appTooltip]></button>
Sign up to request clarification or add additional context in comments.

Comments

1
<div data-toggle="tooltip" #tooltip></div>
class MyComponent {
  @ViewChild('tooltip') tooltip:ElementRef;

  ngAfterViewInit() {
    this.tooltip.nativeElement.tooltip();
  }
}    

5 Comments

Thank you so much!if i have a tooltip list,how to do it?
I don't know Bootstrap. What is "tooltip list"? What's the problem?
Hello~ It's like li(s) in ul, multi elements in a page,use ViewChildren?
I suggest you look at github.com/ng-bootstrap/core instead of re inventing the wheel
-_-|! tooltip is not a function

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.