jojacafe
12/7/2016 - 9:08 AM

Tooltip ajax

Tooltip ajax

<script type="text/javascript">
        $(document).ready(function () {
            var isHover = false;
            var show = true;

            $(".top2regions").hover(
                function () {
                    var that = $(this);

                    if (that.hasClass("load")) {
                        that.tooltip("show");
                    } else if (!isHover) {
                        isHover = true;
                        show = true;
                        //debugger;

                        var iconO = that.children("span");
                        var originalClassIcon = iconO.attr("class");

                        var agency = that.data("agency");

                        $.ajax({
                            url: "/Admin/Agency/GetAgencyTopRegions",
                            type: "post",
                            cache: false,
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify({ agencyId: agency }),
                            datatype: "html",
                            beforeSend: function () {
                                iconO.attr("class", "glyphicon glyphicon-refresh spinning");
                            }
                        })
                        .fail(function (jqXHR, statusText) {
                            try {
                                var errorTxt = $.parseJSON(jqXHR.responseText).message;

                                alert(errorTxt);
                            } catch (e) {
                                alert("Error saving changes.  Please try again.");
                            }
                        })
                        .done(function (data) {
                            if (!data) {
                                alert("Error! You don't have permissions.");
                            }
                            else {
                                that.addClass("load");
                                that.attr("data-original-title", data.message);

                                if (show) {
                                    that.tooltip("show");
                                }
                            }
                        })
                        .always(function () {
                            iconO.attr("class", originalClassIcon);
                            isHover = false;
                        });
                    }
                }, function () {
                    var that = $(this);

                    if (that.hasClass("load")) {
                        that.tooltip("hide");
                    } else if (isHover) {
                        show = false;
                    }
                }
            );
        });
    </script>
<a class="top2regions" data-placement="top" data-toggle="tooltip" data-trigger="manual" href="#!" title="Top 2 Regions" data-agency="@item.Agency.Id"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>