jquery ui html內容提示

我想顯示工具提示使用jquery-ui tooltip 如何爲html內容格式化工具提示，如下圖所示。 enter image description here jquery ui html內容提示

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

來源

2013-11-26 Prince

http://jsfiddle.net/dpjw2/18/這樣的事情？ –

@dholakiyaankit是的，除了箭頭之外幾乎是正確的，謝謝 – Prince

我應該把它作爲答案 –

試試這個，

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

來源

2013-11-26 07:42:30

嘗試是這樣的一個

jsfiddle.net/dpjw2/18

Add tooltip align left

來源

2013-11-26 08:40:25

謝謝，但工具提示裏邊還有邊框 – Prince

jquery ui html內容提示

回答

相關問題