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.