This jQuery tutorial, we will discuss jQuery Tooltip using Visual Studio. This tip is about creating a very simple and cute tooltip with any HTML, CSS, JQuery versions!
jQuery Tooltip
Note that my JQuery Selector in the below code is a[title]. But you can use any selector that you want. For example img[title], or combination of a[title], img[title], etc.
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
var varToolTip = $("<div id=’DtxToolTip’>");
varToolTip.hide();
$("body").append(varToolTip);
$("a[title]").each(function () {
var strTitle = $(this).attr("title");
$(this).removeAttr("title");
$(this).attr("data-tooltip", strTitle);
});
$("a[data-tooltip]").bind("mouseenter", function (e) {
// **************************************************
var varMargin = 2;
var varBodyWidth = $("body").width();
var varWidth = $(this).width();
var varHeight = $(this).height();
var varTop = $(this).offset().top;
var varLeft = $(this).offset().left;
var varWidthOfToolTip = varToolTip.width();
var varTopOfToolTip = varTop + varHeight + varMargin;
var varDifference = varWidth – varWidthOfToolTip;
var varLeftOfToolTip = varLeft + (varDifference / 2);
if (varLeftOfToolTip < varMargin) {
varLeftOfToolTip = varMargin;
}
else {
if (varLeftOfToolTip + varWidthOfToolTip > varBodyWidth – varMargin) {
varLeftOfToolTip = varBodyWidth – varWidthOfToolTip – varMargin;
}
}
// **************************************************
var strTitle = $(this).attr("data-tooltip");
varToolTip.html(strTitle);
varToolTip.css("top", varTopOfToolTip);
varToolTip.css("left", varLeftOfToolTip);
varToolTip.hide();
varToolTip.fadeIn(400);
});
$("a[data-tooltip]").bind("mouseout", function (e) {
varToolTip.fadeOut(200);
});
});
</script>
By the way, you can easily change the style of ToolTip.
<style type="text/css">
div#DtxToolTip {
top: 0px;
left: 0px;
z-index: 1000000;
position: absolute;
width: 200px;
min-height: 30px;
margin: 0px;
padding: 4px;
border-width: 2px;
border-style: outset;
border-color: #CCCCCC #808080 #808080 #CCCCCC;
color: Blue;
background-color: #CCCCFF;
font-size: 8pt;
font-family: Verdana;
}
</style>
You can download full source code here.
You may like following jQuery tutorials:
- Display SharePoint List items in a data table using Rest API and jQuery
- How to show Progress Bar in Asp.Net using jQuery?
- Asp.Net MVC 5 Cascading DropDown List Using jQuery
- How to include jQuery in SharePoint
- JQuery Tabs using content search web part in SharePoint 2013
- Get dropdown selected value and text using jquery in SharePoint Online
- Redirect user to another page in SharePoint 2013/2016/Online using JavaScript or jQuery
- SharePoint 2013/2016: Change Width of List Column using Designer and jQuery
Here we learned how to show jQuery Tooltip Using Visual Studio.
MVP Award Winner | Community Author & Contributor | Software Developer | Most Valuable Blogger(MVB)