I am trying to show a description with clickable link when we hover on any option of the select tag.
<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>Any possibility please?
If you want to use the select/option tag, you can't customize the default drop down list.
You need to use a custom drop down list or use the bootstrap element dropdown.
Also you can code your own drop down list like this if you want an example :-)
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;
}
You can use Bootstrap's tooltip feature for this process. For example, this is as follows;
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
another use;
<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>
For more detailed usage, you can take a look at the bootstrap document.
I hope that will be useful.
Ok so just try to use the title attribute in the option tag.
<option title="Your description">Select Option</option>
I'm pretty sure that this will help.