Javascript 在 dynameclly 创建的选择框中添加工具提示

Question

我有一个 select 框，我用 javascript 动态创建我想在结束时添加一个工具提示将鼠标移到 selected 选项上，它只会给我该选项的文本值。

这就是我创建 select 盒子的方式（简单）

var selectBoxDB = document.createElement("select");
    selectBoxDB .classList.add("form-control");
    selectBoxDB .id = "select_"+mydata["source_name"];
    selectBoxDB .style.width = "300px";
    td.appendChild(selectBoxDB );

 
for(var key in mydata.servers_list) {
    if (dbEntry.servers_list.hasOwnProperty(key)) {

        var option = new Option(key, key);
        option.title = key;                      
        selectBoxDB .appendChild(option);
    }
}

如何在此处组合或附加 select 框创建时的功能
当鼠标悬停在 selected 选项上时，它会弹出工具提示？

Answer 1

您可以将全局鼠标 enter/leave 侦听器添加到 <select> 以显示包含当前值的工具提示。

const tooltip = document.querySelector('.tooltip');

const showTooltip = (e) => {
  Object.assign(tooltip.style, {
    top: `${e.clientY + 8}px`,
    left: `${e.clientX + 8}px`
  });
  tooltip.innerHTML = JSON.stringify({
    value: `${e.target.value}`,
    text: `${e.target.selectedOptions[0].text}`
  }, null, 2);
  tooltip.classList.add('show');
  e.target.setAttribute('title', e.target.selectedOptions[0].text);
};

const hideTooltip = (e) => {
  tooltip.classList.remove('show');
};

const attachListeners = (observeable) => {
  observeable.addEventListener('mouseenter', showTooltip);
  observeable.addEventListener('mouseleave', hideTooltip);
}

document.querySelectorAll('.observeable').forEach(attachListeners);

.tooltip {
  display: none;
  position: absolute;
  border: thin solid #000;
  padding: 0.5em;
  background: rgba(0, 0, 0, 0.66);
  color: #FFF;
  white-space: pre;
  font-family: monospace;
}

.show {
  display: block;
}

<div class="tooltip">Hello World</div>
<select class="observeable">
  <option value="apple">One</option>
  <option value="banana">Two</option>
  <option value="carrot">Three</option>
  <option value="date">Four</option>
  <option value="eggplant">Five</option>
</select>

Javascript 在 dynameclly 创建的选择框中添加工具提示

Javascript adding tooltip on over in selectbox that is created dynameclly

html

javascript

css

select

tooltip