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>