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中无法进行“父级”选择。

希望有帮助。

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

1 个答案: