悬停时，在选择选项中显示说明和可单击的链接

Question

当我们将鼠标悬停在select标记的任何选项上时，我正试图显示一个带有可点击链接的描述。

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

有可能吗？

Answer 1

如果您想使用select/option标记，则不能自定义默认的下拉列表。

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

如果你想要一个例子，你也可以这样编码你自己的下拉列表：-(

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;
}

Answer 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>

有关更详细的用法，您可以查看引导程序文档。

我希望这将是有用的。

Answer 3

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

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

我确信这会有所帮助。