ToolTip Jquery UI and Jquery 1.9.1 modified

by Pragnesh Karia

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<p> <a rel="tooltip" href="#" title="<span class='red'>That's what this widget is</span>">Tooltips with html tags</a> 
    <br>
<a rel="tooltip" href="http://themeroller.com" title="<b>ThemeRoller:</b> jQuery UI's theme builder application <font style='color:red'>with HTML Tags</font>">ThemeRoller</a>
        <br />
    <label for="age">Your age:</label>
    <input id="age" rel="tooltip" title="We ask for your age only for statistical purposes." />

CSS

label {
      display: inline-block;
      width: 5em;
  }
  .red {
      color: red;
  }
  .ui-tooltip, .arrow:after {
      background: black;
  }
  .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;
  }
}

JavaScript

$(function () {
     $.widget("ui.tooltip", $.ui.tooltip, {
         options: {
             content: function () {
                 return $(this).prop('title');
             }
         }
     });

     $('[rel=tooltip]').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);
             }
         }
     });
 });


 /*
  $(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);
              }
          }
      });
  });*/