User61956409 posted
Hi csharpcoder,
It seems that you'd like to display customizable tooltip for select options, to achieve it, you can refer to the following CSS styles. And please note that the
size attribute should be set.
<style>
select {
width:80px;
}
[data-title] {
;
}
[data-title]:hover::before {
content: attr(data-title);
;
bottom: -26px;
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background: #000;
color: #fff;
font-size: 18px;
white-space: nowrap;
z-index:99999;
}
[data-title]:hover::after {
content: '';
;
bottom: -10px;
left: 8px;
display: inline-block;
color: #fff;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
</style>
<select id="ddl1" size="5">
<option value="0" data-title="Test1">Test1</option>
<option selected="selected" data-title="Test2" value="1">Test2</option>
<option value="2" data-title="Test3">Test3</option>
<option value="3" data-title="Test4">Test4</option>
<option value="4" data-title="Test5">Test5</option>
</select>
Test Result

Besides, in this SO thread, Abk shared another approach with bootstrap select, you can check it.
https://stackoverflow.com/a/46989287/6751634
With Regards,
Fei Han