Search code examples
angulartypescripttippyjs

Use Angular's interpolation for data-tippy-content


I'm working on an Angular project and have tippy.js working fine ( https://atomiks.github.io ).

The problem is that I need to fill the tooltips with some JSON information that I could place with Angular's interpolation, but the following error shows up: "Can't bind to 'tippy-content' since it isn't a known property of 'div'."

<div data-tippy-content="{{top.description}}" data-tippy-placement="right" class="layout-tops-photos theme-tops-photos theme-hover js-tippy"></div>

Is there a way to make it work with interpolation? If not, is there another way?


Solution

  • Use attribute binding syntax

    <div attr.data-tippy-content="{{top.description}}" data-tippy-placement="right" class="layout-tops-photos theme-tops-photos theme-hover js-tippy"></div>