JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<a rel="tooltip" href="http://themeroller.com" title='
<div class="toltip-div">
                      <div class="toltip-top">
                <div class="toltip-area">You can set change</div>
                      </div>
                      <div class="toltip-arrow"></div>
                    </div>
'>
 ThemeRoller
</a>

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: -8px -1px 0 0;
width: 13px;
top: 0px;
			}
.toltip-top {
background-color: #FAF9DD;
border: 0px !important;
float: left;
height: 153px;
padding: 0;
width: 283px;
}

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

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