如何使用jqueryui创建自定义工具提示动画？

Question

I have an input box that has a tooltip attached to it. I also have a drop-down menu that chooses from several show animations for the tooltip. What I need to do is create a custom animation which will show the tooltip, and move it across the length of the text-box and then return it to the start. How can I achieve this using the tooltip that I've already created?

HTML:

<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
        $("input").tooltip({
            show: {effect: "fade", duration: 100},
            hide: {effect: "fade", duration: 100}
        });
    }
    else {
        $("input").tooltip({
            show: {effect: animation, duration: 500}
        });
    }
});

Here's a jsfiddle of my progress, the only thing remaining is the custom animation. http://jsfiddle.net/hxm4780m/

Answer 1

You could use the open(event, ui) event to achieve that. Check out the fiddle for a demo.

Code

if (animation == "custom") {

        var $input = $('input');
        $input.tooltip({
            open: function (event, ui) {
                ui.tooltip.animate({
                    left: $input.width()
                }, 500, function () {
                    ui.tooltip.animate({
                        left: 5
                    }, 500);
                });
            },
            hide: {
                effect: "fade",
                duration: 100
            }
        });
    } else {/* ... */}