JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<select id="dropMenu">
<option value="">Choose animation</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="fold">Fold</option>
<option value="scale">Scale</option>
<option value="custom">Custom</option>
</select>
<br>
<br>
<label>Name:</label>
<br>
<input type="text">
CSS
body {
margin-left: 40px;
margin-top: 20px;
}
.ui-tooltip {
width:70px;
background: #000;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
border: 2px solid white;
border-radius: 25px;
padding: 0;
opacity: 1;
}
.ui-tooltip-content {
position: relative;
padding: 0.75em;
padding-left: 1em;
padding-right: 1em;
}
.ui-tooltip-content::before {
content:'';
position: absolute;
border-style: solid;
display: block;
width: 0;
bottom: -13px;
left: 22px;
border-color: #FFF transparent;
border-width: 13px 13px 0;
}
.ui-tooltip-content::after {
content:'';
position: absolute;
border-style: solid;
display: block;
width: 0;
bottom: -10px;
left: 25px;
border-color: #000 transparent;
border-width: 10px 10px 0;
}
JavaScript
$(function () {
$("input").tooltip({
position: {
my: "left-34 bottom-25",
at: "left"
},
items: "input",
content: "NAME"
});
});
$("#dropMenu").on("change", function () {
var animation = $(this).val();
if (animation == "custom") {
//NEED TO MAKE A CUSTOM ANIMATION HERE
var $input = $('input');
$input.tooltip({
sasdasdahow: function (event, ui) {
ui.tooltip.animate({
left: $input.width()
}, 500, function () {
ui.tooltip.animate({
left: 5
}, 500);
});
},
hide: {
effect: "fade",
duration: 100
}
});
} else {
$("input").tooltip({
show: {
effect: animation,
duration: 500
}
});
}
});