CODEWITHSUNDEEP
twitter-bootstrapangulartwitter-bootstrap-4
BHARAT ATHOTA
BHARAT ATHOTA

Reputation: 201

how to show the tooltip with bootstrap 4 and angular 2?

I want to show the tool-tip for input field based on the condition and here is the following code snippet I have used. i want to display tool-tip based on a specific variable.

<input type="text" class="form-control error-tooltip"
    focusFirst="false" ngbTooltip="{{error}}" 
    placement="bottom"
    triggers="manual" #t="ngbTooltip">

Upvotes: 10

Views: 33744

Answers (5)

Mayukha
Mayukha

Reputation: 21

use 'disableTooltip', it takes a boolean value.

<label placement="top" [ngbTooltip]='Your message ' [disableTooltip]='Your condition' class="col-md-3">

I used on a label and it worked for me.

Upvotes: 2

Rehman Gull
Rehman Gull

Reputation: 63

Use Bootstrap 4 Tooltip

<button type="button" class="btn btn-outline-secondary mr-2" placement="top" ngbTooltip="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-outline-secondary mr-2" placement="right" ngbTooltip="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-outline-secondary mr-2" placement="bottom" ngbTooltip="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-outline-secondary mr-2" placement="left" ngbTooltip="Tooltip on left">
  Tooltip on left
</button>

Angular Powered Bootstrap

Upvotes: 0

Kapil Thakkar
Kapil Thakkar

Reputation: 870

Use ngbTooltip for tooltip

Ex:

<i data-toggle="tooltip" data-placement="top" ngbTooltip="your message">?</i>

Upvotes: 2

newan
newan

Reputation: 152

in your Template:

 <input type="text" class="form-control" formControlName="name" placeholder="placeholder" ngbTooltip="tipContent" #t="ngbTooltip" >

in your controller:

@ViewChild('t') tooltip: NgbTooltip;

in your method to open, like submit :

this.tooltip.open();

make sure jo load the modules and import NgbTooltip

See example, Context and manual triggers, in the doc: https://ng-bootstrap.github.io/#/components/tooltip/examples

Upvotes: 11

ulubeyn
ulubeyn

Reputation: 3021

In official docs;

Tooltips can contain any arbitrary HTML, Angular bindings and even directives! Simply enclose desired content in a <template> element.

Example from official site;

<template #tipContent>Hello, <b>{{name}}</b>!</template>
<button type="button" class="btn btn-secondary" [ngbTooltip]="tipContent">
  I've got markup and bindings in my tooltip!
</button>

Upvotes: 2

Related Questions