jQuery Tooltip with custom style and arrow in MVC3 Razor

Home » jQuery Tooltip » jQuery Tooltip with custom style and arrow in MVC3 Razor

jQuery Tooltip with custom style and arrow in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery Tooltip

In this article we will see how to use jQuery Tooltip and customize its style. We will also see how to display arrow with tooltip.
Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
Tooltips are also useful for form elements, to show some additional information in the context of each field.
The default tooltip shown in different browser limits the number of characters to display, like IE7 shows only 572 characters as default tooltip. Using this jQuery tooltip we can display any number of characters.
We have integrated this tooltip with MVC3 Razor application.

Following are the steps :

View :

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<style>
 .ui-tooltip, .arrow:after {
  background: black;
  border: 2px solid white;
 }
 .ui-tooltip {
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  font: bold 14px "Helvetica Neue", Sans-Serif;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
 }
 .arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
 }
 .arrow.top {
  top: -16px;
  bottom: auto;
 }
 .arrow.left {
  left: 20%;
 }
 .arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  tranform: rotate(45deg);
 }
 .arrow.top:after {
  bottom: -20px;
  top: auto;
 }
 </style>
<a href="#" title="jQuery Tooltip is Amazing !!">jQuery Tooltip</a> provides easy way to implement attractive tooltips.<br /><br  />
<label for="Age">Age :</label>
<input type="text" id="Age" title="Only above 20 are allowed" />


<script type="text/javascript">
    $(function () {
        $(document).tooltip({
            position: {
                my: "center bottom-20",
                at: "center top",
                using: function (position, feedback) {
                    $(this).css(position);
                    $("<div>")
      .addClass("arrow")
      .addClass(feedback.vertical)
      .addClass(feedback.horizontal)
      .appendTo(this);
                }
            }
        });
    });

</script>

In the above view, we have referenced the layout file. The Layout file has references of all script files needed to render jQuery tooltip. We have defined a paragraph element with title attribute. We have defined CSS classes which are applied to tooltip. In the script section we have added the CSS classes to give it unique and good look.

Layout :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.tooltip.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

The above is the layout file. It has references of script files required to use jQuery tooltip. This layout is referenced in View where we want to use jQuery tooltip.

Demo :

Hover the link and textbox.

In the above demo, we have used document as selector. Using document will apply tooltip to all the elements having title attribute.

Thus by following above steps, we can customize the style and look of jQuery Tooltip.