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

Question

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

知道怎么做吗..？

Answer 1

您只需在用户键入时在文本区域上添加事件监听器，并通过文本区域的值更改标题属性即可。

工作 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>