html içeriğiyle jquery ui araç ipucu

Question

jquery-ui tooltip Araç ipucunu görüntülemek istiyorum html içeriği için resimdeki gibi araç ipucunu nasıl biçimlendirebilirim?

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

bu deneyin,

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

Answer 2

bu bir

jsfiddle.net/dpjw2/18

gibi bir şey deneyin

Araç ipucu ekle sola hizala