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

How to create custom tooltip animation with jqueryui?

本文关键字：工具提示动画自定义创建何使用 jqueryui 更新时间：2023-09-26

我有一个附加了工具提示的输入框。我还有一个下拉菜单，可以从几个显示动画中选择工具提示。我需要做的是创建一个自定义动画，它将显示工具提示，并在文本框的长度上移动它，然后将其返回到起点。如何使用我已经创建的工具提示实现这一点？

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

下面是我的进度，剩下的就是自定义动画。http://jsfiddle.net/hxm4780m/

您可以使用open（event，ui）事件来实现这一点。查看小提琴以获取演示。

代码

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 {/* ... */}