如何在可移动列表框上显示工具提示答案

【问题标题】：How to show tooltip on movable listbox如何在可移动列表框上显示工具提示
【发布时间】：2021-01-30 14:42:39
【问题描述】：

我的 aspx 页面上有以下控件

<asp:ListBox ID = "X" runat="Server" CssClass = "listbox"></asp:ListBox>

我必须在列表项上显示一个工具提示，其中项目是可移动的，这意味着我可以更改 UI 上任何项目的位置。

我在页面加载时添加了我的自定义方法

protected void Page_Load(){
  foreach(ListItem li in X {.
    string tip = li.Text;
    li.Attribute.Add("title",tip) })}

但问题是工具提示仅针对加载的页面，一旦我更改列表项的位置，它仍然显示旧的工具提示。

有什么办法可以处理这种情况？

【问题讨论】：

您是否使用任何自定义工具提示代码，或者您是否依赖默认浏览器行为？
我想在鼠标悬停时显示工具提示，我不确定它是如何工作的。
“鼠标悬停时显示工具提示”是默认浏览器行为。您是否使用自定义工具提示代码？
所以我将在页面加载时获取所有列表项，我需要将所有这些列表项文本显示为工具提示。我没有任何自定义工具提示代码
在没有自定义工具提示软件的情况下，“鼠标悬停时显示工具提示”仅通过显示元素的 title 属性的内容来工作。如果这对您不起作用，请发布 minimal reproducible example 来证明这不起作用。

标签： javascript c# jquery asp.net listbox

【解决方案1】：

假设“更改 UI 上任何项目的位置”意味着重新排序 <li> 元素，则工具提示信息应与 <li> 一起使用，因为它取自 li 的 title 属性。

除非您有某种自定义工具提示代码。

如此处所示，工具提示文本与其li 保持一致：

const btn = document.querySelector('button');
const ul = document.querySelector('ul');
btn.onclick = function () {
  const [first, second, third] = [...document.querySelectorAll('li')];
  ul.insertBefore(third, first);
}

li {
  margin-bottom: 0.5rem;
}

<button>Move</button>

<ul>
  <li title="first item">First Item</li>
  <li title="second item">Second Item</li>
  <li title="third item">Third Item</li>
</ul>

【讨论】：