4 - 1

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Задача 1</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	  <style>

    </style>


</head>

<script>

  $(function() {
      $("#effect").change(function(){
            $( document ).tooltip({
              show: {
                effect: $( "#effect" ).val(),
                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>

<style>
.ui-tooltip, .arrow:after {
        background: black;
        border: 2px solid white;
        position: absolute;
        left:-50px;
    }
    .ui-tooltip {
        padding: 10px 20px;
        color: white;
        border-radius: 20px;
        font: bold 14px "Helvetica Neue", Sans-Serif;
        text-transform: uppercase;
        box-shadow: 0 0 7px black;
        position:absolute;
        left:-40px;
    }
    .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 40px;
        margin-left: -40px;
        bottom: -16px;
    }
    .arrow.top {
        top: -16px;
        bottom: auto;
    }
    .arrow.left {
        left: 20px;
    }
    .arrow:after {
        content: "";
        position: absolute;
        left: 20px;
        top: -20px;
        width: 25px;
        height: 25px;
        box-shadow: 6px 5px 9px -9px black;
        -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;
    }

</style>

<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="myAnimation">My animation</option>
  </select>
  <br/><br/>
 <div style="width:100px">Име:</div><input id="ime" class="tooltip" name="ime" style="width:200px" title="Име"/>

 </div>
</body>
</html>