On hover, showing description and a clickable link in select option

Question

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?

tried searching a lot, but cannot find the solution. Found one: https://stackoverflow.com/questions/44396627/bootstrap-hover-over-the-tooltip-text-to-click-a-link, but it doesn't work in option tag — Pardeep Kumar, Jan 05 '22 at 17:31
I am pretty sure you'll need to use a different element, like a bootstrap style dropdown. I don't think you can trigger a mouseover on option elements — Kinglish, Jan 05 '22 at 17:33
@Kinglish can you please show how can select2 help with solution? — Pardeep Kumar, Jan 05 '22 at 18:53
you will have to dig in the docs yourself - basically select2 rewrites the select menu in html, which you can then attach events to. However, for that it would just be simpler to go with a bootstrap dropdown. — Kinglish, Jan 05 '22 at 18:56
@Kinglish I actually went through the documentation but it didn't serve the purpose. I will further look at the possibility. Thank you... — Pardeep Kumar, Jan 05 '22 at 18:58

score 2 · Answer 1 · answered Jan 05 '22 at 18:21

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

it is a good option but doesn't match the style of the overall project of mine. It would require me to restructuring the whole project. I am looking for other option. — Pardeep Kumar, Jan 05 '22 at 18:56

alierguc · Answer 2 · 2022-01-05T17:34:23.630

-1

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.

edited Jan 05 '22 at 17:34

answered Jan 05 '22 at 17:31

alierguc

67
4

Thanks but I have gone through bootstrap documentation on this. It doesn't fulfill the required needs. – Pardeep Kumar Jan 05 '22 at 17:33
The question is more how to trigger an event from an ` – Kinglish Jan 05 '22 at 17:36
If this is the problem, it is explained in detail in the bootstrap document. ```. ``` – alierguc Jan 05 '22 at 17:38
@alierguc but it doesn't allow me to use a clickable link in the tooltip – Pardeep Kumar Jan 05 '22 at 17:54

Monish Munagala · Answer 3 · 2022-01-05T17:44:05.703

-1

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.

edited Jan 05 '22 at 17:44

answered Jan 05 '22 at 17:34

Monish Munagala

17
3

1

This doesn't address either of the OPs questions – Kinglish Jan 05 '22 at 17:36
it doesn't allow me to use a clickable link in the title – Pardeep Kumar Jan 05 '22 at 18:06

On hover, showing description and a clickable link in select option

3 Answers3