Option html tag with styling and tooltip on hover

I have a dropdown / combobox that I would like to style the option tag and show a tooltip on hover here is my code.

here is my html:

<select class="primary" name="primary" width="14%">
  <option> -- Select -- </option>
  <option data-tooltip="test 1" title="1 long description" value="1"> test 1</option>
  <option data-tooltip="test 2" title="2 medium description" value="1"> test 2</option>
</select>

here is my css

option[title]:hover:after{
    content: attr(title);
     background: red; 
     color: white;
     display:block;
     position:absolute;
     top:0;
     right:-100%;
}

What advise and suggestion you can advise me.

Things I tried:

• using a span tag on option and set a hover (but upon research span tags dont necessarily work within option tag)
• using data attr to try to show tooltip