悬停时，在选择选项中显示描述和可点击链接答案

【问题标题】：On hover, showing description and a clickable link in select option悬停时，在选择选项中显示描述和可点击链接
【发布时间】：2022-01-05 17:26:36
【问题描述】：

当我们将鼠标悬停在选择标签的任何选项上时，我正在尝试显示带有可点击链接的描述。

<div class="col-lg-4">
  <div class="form-group">
    <label class="form-label">Goal</label>
    <select name="semiTaskType" class="form-select" id="semiTaskType">
      <option>Select Option</option>
      <option value='regression'>Soft Sensor</option>
      <option value='classification'>Contributory Factors</option>
      <option value='forecasting'>Prediction</option>
    </select>
  </div>
</div>

请问有什么可能吗？

【问题讨论】：

到目前为止你尝试了什么？
尝试了很多搜索，但找不到解决方案。找到一个：stackoverflow.com/questions/44396627/…，但在选项标签中不起作用
我很确定您需要使用不同的元素，例如引导样式的下拉菜单。我认为您不能在选项元素上触发鼠标悬停
另一种选择：select2.org
@Kinglish 你能说明 select2 如何帮助解决问题吗？

标签： javascript html ajax

【解决方案1】：

如果要使用选择/选项标签，则不能自定义默认下拉列表。

您需要使用自定义下拉列表或使用引导元素下拉列表。

如果你想要一个例子，你也可以像这样编写你自己的下拉列表:-)

https://codepen.io/Sinorielle/pen/jOGKYaP

HTML：

<div class="col-lg-4">
    <div class="form-group">
        <label class="form-label">Goal</label>
        <div name="semiTaskType" class="form-select customDropDownList" id="semiTaskType">
          <div class="selectedOption">Select Option ▼</div>
          <ul class="listContainer">
            <li value='regression'>
              <p>Soft Sensor</p>
              <p class="description">
                Description
                <a href="#">The link of death</a>
              </p>
            </li>
            <li value='classification'>
              <p>Contributory Factors</p>
              <p class="description">
                Description
                <a href="#">The link of death</a>
              </p>
            </li>
            <li value='forecasting'>
              <p>Prediction</p>
              <p class="description">
                Description
                <a href="#">The link of death</a>
              </p>
            </li>          
            <li value='forecasting2'>
              <p>Title</p>
              <p class="description">
                Description
                <a href="#">The link of death</a>
              </p>
            </li>
          </ul>
        </div>
    </div>
</div>

CSS：

.customDropDownList{
  display: inline-block;
  position: relative;
}

.customDropDownList:hover .listContainer{
  display: block;
}
.selectedOption{
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
  background: white;
}
.listContainer {
  display: none;
  position: absolute;
  border: 1px solid black;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  list-style: none;
  z-index: -10;
}
li {
  
  padding: 5px;
}
li:hover {
  cursor: pointer;  
  background: grey;
}
p {
  margin: unset;
}
.description {
  display: none;
}
li:hover .description {
  display: block;
}

【讨论】：

这是一个不错的选择，但不符合我整个项目的风格。这将需要我重组整个项目。我正在寻找其他选择。

【解决方案2】：

您可以在此过程中使用 Bootstrap 的工具提示功能。例如，如下所示；

 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

另一种用途；


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

更详细的使用方法可以看bootstrap文档。

我希望这会有用。

【讨论】：

谢谢，但我已经阅读了这方面的引导文档。它不能满足所需的需求。
问题更多的是如何从<option> 鼠标悬停触发事件，而不是如何显示工具提示。
如果是这个问题，在bootstrap文档中有详细说明。 .<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
@alierguc 但它不允许我在工具提示中使用可点击的链接

【解决方案3】：

好的，所以尝试在选项标签中使用 title 属性。

 <option title="Your description">Select Option</option>

我很确定这会有所帮助。

【讨论】：

这并没有解决任何一个 OP 问题
它不允许我在标题中使用可点击的链接