jquery ui tooltip with html content

Question

I want to display tooltip using jquery-ui tooltip How can I format tooltip like below image for html content.

example:-

js:-

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

CSS:-

.toltip-div {
            height: 144px;
            margin: 0 auto;
            padding: 0;
            width: 280px;
            }
            .toltip-top {
            background-color: #FAF9DD;
            border: 1px solid #D8D8D8;
            float: left;
            height: 153px;
            padding: 0;
            width: 258px;
            }
            .toltip-area {
            color: #7F7F7F;
            float: left;
            font-family: 'open_sanssemibold_italic';
            font-size: 15px;
            height: 110px;
            margin: 0 auto;
            padding: 18px 0 0 32px;
            width: 227px;
            }
            /*.toltip-arrow {
            background: url("images/toltip-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
            float: left;
            height: 22px;
            margin: 65px 0 0 -1px;
            width: 14px;
            }*/
            .toptip-close {
            float: right;
            height: 13px;
            margin: 9px 8px 0 0;
            width: 13px;
            }

  .ui-tooltip, .arrow:after {
       background:  #FAF9DD; 

  }
  .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;
  }
}

Answer 1

Try this,

CSS

.arrow {
    bottom: -16px;
    height: 10px;
    position: absolute;
    right: -13px;
    top: 50%;
    width: 15px;
}
.arrow.top {
    /*top: -16px;
    bottom: auto;*/
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 10px solid rgba(0, 0, 0, 0);
    border-left: 13px solid #FAF9DD;
    border-top: 10px solid rgba(0, 0, 0, 0);
    bottom: 0;
    box-shadow: 6px 5px 9px -9px #000000;
    content:" ";
    position: absolute;
    right: 0;
}
.arrow.top:after {
    /* bottom: -20px;
    top: auto;*/
}

SCRIPT

$('[rel=tooltip]').tooltip({
    position: {
        my: "center bottom+90",
        at: "left-170",
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
                .addClass("arrow")
                .addClass(feedback.vertical)
                .addClass(feedback.horizontal)
                .appendTo(this);
        }
    }
});

Demo