I am trying to select a style from the dropdown menu and have the tooltip animate in the selected way. However, my tooltip is always behaving the same. Could the issue be with the 'show:' property or am I not getting the correct value of the style? Should I consider using the change() function?
Check out this link for reference
<script>
$(function() {
var value=$( "#effect" ).val();
$( document ).tooltip({
show: {
effect: value,
delay: 50
},
position: {
my: "center bottom-20",
at: "left top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
</script>
</head>
<body >
<div style="width:400px; margin:100px auto;">
<select id="effect">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
<option value="myAnimation">My animation</option>
</select>
<br/><br/>
<div style="width:100px">Име:</div><input id="ime" class="tooltip" name="ime" style="width:200px" title="Име"/>
</div>