如何将工具提示添加到输入标记的占位符？

Question

我想创建这样的东西：

占位符必须是“活动条款”加上问号图标。当用户将鼠标悬停在问号上时，将显示工具提示。

我认为占位符不能包含带有工具提示的问号图标。我正在考虑在单独的div中添加文本和图标，然后可以在输入区域内显示。

这是正确的做法吗？如果您有更好的解决方案，请告诉我。

谢谢！

Answer 1

我会这样做的

＆＃13;

＆＃13;

div {
  position: relative;
}
.placeholder {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  color: #ccc;
}
.placeholder b {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  background-color: #ccc;
  color: #fff;
  margin-top: 2px;
  margin-left: 5px;
  border-radius: 50%;
  cursor: pointer;
}
input:focus + span,
input:valid + span {
  display: none;
}

＆＃13;

<form>
  <div>
    <input type="text" required>
    <span class="placeholder">Text<b title="Lorem ipsum">?</b></span>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需使用:before或:after即可获得与您相似的内容。 我建议将输入换行到label而不是div。

＆＃13;

＆＃13;

label.myLabel {
  position: relative;
}
.myLabel > input[type=text] {
  width: 200px;
  height: 30px;
}
.tag {
  background: black;
  text-align: center;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: 5px;
}
.tag:before {
  content: "text will show up";
  display: none;
  width: 120px;
  background: black;
  color: white;
  position: absolute;
  bottom: -20px;
}
.tag:hover:before {
  display: block;
}

＆＃13;

<label class="myLabel">
  <input type="text"/>
  <div class="tag">?</div>
</label>

＆＃13;

＆＃13;

＆＃13;

或者您可以设置弹出文本以输入或标签的属性，并阅读＆amp;将其设置为tag元素的阶梯。

Answer 3

在角形材料中，可以利用mat-label属性获得占位符。

在mat-form-field内具有包含占位符的mat-label属性，如下所示：

<mat-form-field>
  <mat-label>
    <span matTooltip="The display value for tooltip.">
      Tooltip Name
    </span>
  </mat-label>
      <input matInput required maxlength="160">
 </mat-form-field>

也在CSS组件中添加：

mat-label {
pointer-events: auto;
}