Estoy tratando de mostrar una descripción con un enlace en el que se puede hacer clic cuando pasamos el mouse sobre cualquier opción de la etiqueta de selección.
<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>¿Alguna posibilidad por favor?
Si desea utilizar la etiqueta de selección/opción, no puede personalizar la lista desplegable predeterminada.
Debe usar una lista desplegable personalizada o usar el menú desplegable de elementos de arranque.
También puede codificar su propia lista desplegable como esta si desea un ejemplo :-)
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; }Puede utilizar la función de información sobre herramientas de Bootstrap para este proceso. Por ejemplo, esto es como sigue;
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button>otro uso;
<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>Para un uso más detallado, puede consultar el documento de arranque.
Espero que sea útil.
Ok, solo intente usar el atributo de título en la etiqueta de opción.
<option title="Your description">Select Option</option>Estoy bastante seguro de que esto ayudará.