如何显示动态变化值的工具提示？

Question

我想在textarea的鼠标悬停上显示工具提示，但textarea上的值不是静态的。用户可以输入一个冗长的文本，并希望在工具提示中显示更新的数据。

知道该怎么做..？

Answer 1

您只需在用户输入时在您的textarea上添加事件监听器，并将标题属性更改为textarea的值。

使用JQuery示例

$(".texttooltip").keyup(function(){
  $(this).attr("title",$(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class="texttooltip"></textarea>

<textarea class="texttooltip"></textarea>

<textarea class="texttooltip"></textarea>

使用JS

var texttooltip = document.getElementsByClassName("texttooltip");

var updatetitle = function() { {
    this.setAttribute("title", this.value);
  }
};

for (var i = 0; i < texttooltip.length; i++) {
    texttooltip[i].addEventListener('keyup', updatetitle, false);
}

<textarea title="" class="texttooltip"></textarea>

<textarea title="" class="texttooltip"></textarea>

<textarea title="" class="texttooltip"></textarea>