CODEWITHSUNDEEP
angulartypescriptangular9
joe2020wow
joe2020wow

Reputation: 237

Angular ngx translate not allowed in css tooltip in button

On an angular 9 project I am using ngx-translate and also have so css for tooltips.

In app.component.html I've added a button.

<button
    type="button"
    tooltip={{ 'TITLE' | translate }}
    tooltip-position='right'>
</button>

I have an issue with this line:

tooltip={{ 'TITLE' | translate }}

I've also tried doing it like this:

tooltip="{{ 'TITLE' | translate }}"

But I get:

Can't bind to 'tooltip' since it isn't a known property of 'button'.

But I know it works because when I do this:

tooltip="Some text here"

It will show the tooltip.

How can I fix this? Is there a way around it?

Upvotes: 0

Views: 660

Answers (2)

Oganesman
Oganesman

Reputation: 1

hello faced the same problem as you, I use a translator and at the same time I want to translate the popup, here is the result of how to do it using the title attribute, and css, but add a different translation for you depending on the selected language, just add to the attribute name in square brackets

*[title] {
  position: relative;
}

*[title]::after {
  content: attr(title);
  position: absolute;
  bottom: -34px;
  left: auto;
  width: fit-content;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -ms-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
  display: block;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  border-radius: 5px;
  background: #393838;
  padding: 6px 15px;
  color: white;
}

*[title]:hover::after {
  opacity: 1;
}
<div title="Hello muffin!">
  Hello Sweetie!
</div>

<div [title]=" 'Hi Muffin!' | translate">
     Hello Sweetie!
</div>

Upvotes: 0

Aakash Garg
Aakash Garg

Reputation: 10979

try [title]="'TITLE' | translate"

Upvotes: 3

Related Questions