Configuration animation

An object that defines the animation options of the widget.

Type: Object
Default Value: { show: { type: 'fade', from: 0, to: 1 }, hide: { type: 'fade', to: 0 } }

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div id="button" dx-button="{ text:'Hover over me' }" ng-mouseover="toggleTooltip()" ng-mouseout="toggleTooltip()"></div>
    <div dx-tooltip="{ 
        target: '#button',
        bindingOptions: {
            visible: 'tooltipVisible',
            animation: {
                deep: false,
                dataPath: 'animationConfig'
            }
        }
    }">
        <div data-options="dxTemplate:{ name: 'content' }">
            <p>This is a button.</p>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Animation type</div>
            <div class="dx-field-value" dx-select-box="{ 
                items: animationTypes,
                onValueChanged: typeChanged,
                value: 'fade'
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.tooltipVisible = false;
    $scope.toggleTooltip = function () {
        $scope.tooltipVisible = !$scope.tooltipVisible;
    },
    $scope.animationTypes = [
        "fade",
        "pop",
        "slide"
    ];
    $scope.animationConfig = {
        show: { type: "fade", from: 0, to: 1 },
        hide: { type: "fade", from: 1, to: 0 }
    };
    $scope.typeChanged = function (e) {
        switch (e.value) {
            case "slide":
                $scope.animationConfig = {
                    show: { type: "slide", from: { opacity: 1, top: -100 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -100 } }
                };
                break;
            case "pop":
                $scope.animationConfig = {
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                };
                break;
            case "fade":
                $scope.animationConfig = {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                };
                break;
            default:
                $scope.animationConfig = {};
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
<div id="button" data-bind="dxButton:{ text:'Hover over me' }, event: { mouseover: toggleTooltip, mouseout: toggleTooltip } "></div>
<div data-bind="dxTooltip:{
    target: '#button',
    visible: tooltipVisible,
    animation: animationConfig
}">
    <div data-options="dxTemplate:{ name: 'content' }">
        <p>This is a button.</p>
    </div>
</div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div style="width: 60%" class="dx-field-label">Animation type</div>
        <div style="width: 40%" class="dx-field-value" data-bind="dxSelectBox: {
            items: animationTypes,
            value: 'fade',
            onValueChanged: typeChanged
        }"></div>
    </div>
</div>
var myViewModel = {
    tooltipVisible: ko.observable(false),
    toggleTooltip: function () {
        this.tooltipVisible(!this.tooltipVisible());
    },
    animationTypes: [
        "fade",
        "pop",
        "slide"
    ],
    animationConfig: ko.observable({
        show: { type: "fade", from: 0, to: 1 },
        hide: { type: "fade", from: 1, to: 0 }
    }),
    typeChanged: function (e) {
        switch (e.value) {
            case "slide":
                this.animationConfig({
                    show: { type: "slide", from: { opacity: 1, top: -100 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -100 } }
                });
                break;
            case "pop":
                this.animationConfig({
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                });
                break;
            case "fade":
                this.animationConfig({
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                this.animationConfig({});
        }
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
<div id="button"></div>
<div id="myTooltip"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Animation type</div>
        <div class="dx-field-value" id="animationSelector"></div>
    </div>
</div>
$("#myTooltip").dxTooltip({
    target: "#button",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>This is a button.</p>");
    },
    animation: {
        show: { type: "fade", from: 0, to: 1 },
        hide: { type: "fade", from: 1, to: 0 }
    }
});
$("#button").dxButton({
    text: 'Hover over me'
});
$("#button").mouseover(function () {
    $("#myTooltip").dxTooltip("instance").show();
});
$("#button").mouseout(function () {
    $("#myTooltip").dxTooltip("instance").hide();
});
$("#animationSelector").dxSelectBox({
    items: [
        "fade",
        "pop",
        "slide"
    ],
    value: 'fade',
    onValueChanged: function (e) {
        switch (e.value) {
            case "slide":
                $("#myTooltip").dxTooltip("instance").option("animation", {
                    show: { type: "slide", from: { opacity: 1, top: -100 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -100 } }
                });
                break;
            case "pop":
                $("#myTooltip").dxTooltip("instance").option("animation", {
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                });
                break;
            case "fade":
                $("#myTooltip").dxTooltip("instance").option("animation", {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                $("#myTooltip").dxTooltip("instance").option("animation", {});
        }
    }
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}

hide

An object that defines the animation options used when the widget is being hidden.

Default Value: { type: 'fade', to: 0 }

show

An object that defines the animation options used when the widget is being shown.

Default Value: { type: 'fade', from: 0, to: 1 }