如何显示带有可变数据的工具提示？

Question

我在

html

有一个表单，我想在用户将鼠标悬停在某个输入字段上时添加工具提示。然而，工具提示数据是从

json

获取的，并且是动态的。我该怎么做？

我尝试了以下方法：

<div data-balloon="{{ obj.info }}" data-balloon-pos="up">
    <input class="form-control" type="text" [id]="obj.key">
</div>

但是它会抛出模板解析错误：

Can't bind to 'balloon' since it isn't a known property of 'div'.

我也尝试过：

<div [data-balloon]="obj.info" data-balloon-pos="up">
    <input class="form-control" type="text" [id]="obj.key">
</div>

我该如何进行？

Answer 1

您可以简单地使用仅具有 CSS 的伪元素来显示您的任何属性：

div[data-balloon] {
  float:left;
}

div[data-balloon]:hover::after {
  content: attr(data-balloon);
  border: 1px solid black;
  border-radius: 8px;
  background: #eee;
  padding: 4px; 
}

<div data-balloon="My data here" data-balloon-pos="up">
    <input class="form-control" type="text" [id]="obj.key">
</div>

如果您的

div

元素中没有更多内容，则在

:hover

上使用

div

应该可以正常工作。
如果还有更多内容...您可能需要将

data-balloon

移动到

input

元素，因为在 CSS 中不可能选择“父级”。

希望有帮助。

Answer 2

我也有同样的问题，我也不明白上面的答案实际上是如何回答这个问题的。我已经运行了代码，无论您尝试在文本框中输入什么内容，工具提示中的“我的数据在这里”都不会改变。如果有的话会更有用。