Changing the effect of tooltip through a select menu

Question

I am trying to change the effect of the tooltip based on what the user chooses from a select menu. My problem is that the selected effect works only for the value that's selected by default (like in the HTML code below where "bounce" is selected), but it doesn't change the effect once I choose something else. Any ideas how to fix this?

My code:

$(document).ready(function(){
    $("#tltp").tooltip({
        show: { effect: $("#tooltip-effect").val(), duration: 400}
         })
    });

HTML:

<select id="tooltip-effect">
    <option value="none">Select an animation</option>
    <option value="bounce" selected>Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode" >Explode</option>
    <option value="shake">Shake</option>
</select>
<input id="tltp" type="text" title="Enter a name">

Bogdan · Accepted Answer · 2018-12-11 19:56:47Z

1

It happens, because you don't call your function after selecting a new option. You should call it every time the option is selected in order to change the effect.

answered Dec 11, 2018 at 19:56

Bogdan

891 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing the effect of tooltip through a select menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related