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

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 元素中没有其他内容，那么在 div.
上使用 :hover 应该可以正常工作如果还有更多……您可能想将 data-balloon 移动到 input 元素，因为在 CSS.

中无法选择“父级”

希望对您有所帮助。

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

How to display tooltip with variable data?

html

tooltip