CODEWITHSUNDEEP
angulartooltiptwitter-bootstrap-tooltip
Kalpesh Shingala
Kalpesh Shingala

Reputation: 1

HTML in bootstrap tooltip

I am working on Angular 2 project and I use bootstrap tooltip. I have project name fetched by API. I want to display this project names in tooltip when one hovers over a component. Is it possible to add this data in html?

Upvotes: 0

Views: 1867

Answers (2)

void
void

Reputation: 36703

Add data-toggle="tooltip" to add tooltip on hover of your component. You might need to initialize it using $('[data-toggle="tooltip"]').tooltip() in your .ts file.

<app-differen-component data-toggle="tooltip" title="Some tooltip content">

</app-differen-component>

Upvotes: 1

Safiyya
Safiyya

Reputation: 1393

You could use a third-party library like https://ng-bootstrap.github.io/#/components/tooltip/examples: 

<p>
  Tooltips can contain any arbitrary HTML, Angular bindings and even directives!
  Simply enclose desired content in a <code>&lt;ng-template&gt;</code> element.
</p>

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

Upvotes: 0

Related Questions