按钮中的 css 工具提示中不允许使用角度 ngx 翻译

Question

在一个角度9项目上，我正在使用ngx-translate，并且工具提示也有这样的css。

在app.component中.html我添加了一个按钮。

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

我对这一行有问题：

tooltip={{ 'TITLE' | translate }}

我也尝试过这样做：

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

但我得到：

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

但我知道它有效，因为当我这样做时：

tooltip="Some text here"

它将显示工具提示。

我该如何解决这个问题？有没有办法解决它？

Answer 1

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

Answer 2

您好，遇到了与您相同的问题，我使用翻译器，同时我想翻译弹出窗口，这是如何使用title属性和css进行操作的结果，但是根据所选语言为您添加不同的翻译，只需添加到方括号中的属性名称即可

*[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>