JSFiddle - React, Tailwind, and code Playground

HTML

<select title="select" size="10">
  <option title="volvo" value="volvo">Volvo</option>
  <option title="saab" value="saab">Saab</option>
  <option title="opel" value="opel">Opel</option>
  <option title="audi" value="audi">Audi</option>
</select>

CSS

.ui-tooltip, .arrow:after {
    background: #fffdc2;
	border:1px solid #e1e0aa;}
	
  .ui-tooltip {
	z-index:10;
	width:150px;
	max-width:100%;
    font-size:0.875em;
	text-align:center;
    border-radius: 20px;
	color:#707070;
	background:#fffdc2 url(../img/fade.png) repeat-x;
	font-family: 'Droid Sans', sans-serif;
	text-shadow: 1px 1px #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:1px solid #e1e0aa;}
	
  .arrow {
    width: 50px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
	*display:none;}
	
  .arrow.top {
    top: -16px;
    bottom: auto;}
	
  .arrow.left {
    left: 20%;}
	
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);}
	
  .arrow.top:after {
    bottom: -20px;
    top: auto;}

JavaScript

$(function () {
    $(document).tooltip({items:"select,option",position:{ my: "left top", at: "left bottom"}
    }); 
});