CODEWITHSUNDEEP
jqueryhtmlcssjquery-animatetooltip
e8oo
e8oo

Reputation: 3

Jquery Tooltip animation

i have to choose style from dropdown menu and tooltip should animate selected way. but my tooltip always acts same. Is there any problem in show: or i cant get right value of style. Should i use change() function ?

http://jsfiddle.net/2n5k6kwn/1/

 <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>

Upvotes: 0

Views: 2127

Answers (2)

Alessandro Marchisio
Alessandro Marchisio

Reputation: 545

this work.. see http://jsfiddle.net/alemarch/2n5k6kwn/2/

  $(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 );
            }
          }
        })
     })
  });

Upvotes: 1

Jente Rosseel
Jente Rosseel

Reputation: 1205

You're selecting the value on page load. You are then setting the value used in the page load to be the tooltip to use every time.

You're also changing all the tooltips of the page at once by registering the event on document-level.

Change your code to this for it to behave in the correct way:

$( '#ime' ).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 );
    }
  }
   });

});

Even better would be to change the value of the variable 'value' everytime the dropdown box changes. THen jquery will not have to lookup the value every time a tooltip occurs.

Upvotes: 0

Related Questions