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

I am trying to show a description with clickable link when we hover on any option of the select tag.

<div >
    <div >
        <label >Goal</label>
        <select name="semiTaskType"  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?

CodePudding user response：

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 >
    <div >
        <label >Goal</label>
        <div name="semiTaskType"  id="semiTaskType">
          <div >Select Option ▼</div>
          <ul >
            <li value='regression'>
              <p>Soft Sensor</p>
              <p >
                Description
                <a href="#">The link of death</a>
              </p>
            </li>
            <li value='classification'>
              <p>Contributory Factors</p>
              <p >
                Description
                <a href="#">The link of death</a>
              </p>
            </li>
            <li value='forecasting'>
              <p>Prediction</p>
              <p >
                Description
                <a href="#">The link of death</a>
              </p>
            </li>          
            <li value='forecasting2'>
              <p>Title</p>
              <p >
                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;
}

CodePudding user response：

You can use Bootstrap's tooltip feature for this process. For example, this is as follows;

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

another use;


<button type="button"  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.

CodePudding user response：

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.