如何使工具提示（qtip2）位于中心顶部？以及如何在其中添加图像？

Question

对不起这个问题，但是如何让我的工具提示（qtip2）出现在工具提示尾部的顶部（中央）并且里面有一些图片？这是我的代码：

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 tooltip-item "> 
     <div class="wrapper-tooltips test"> 
      <div class="first-line"> 
       2 min 
      </div> 
      <div class="second-line"> 
       from 
      </div> 
      <div class="destinations-line"> 
      <span>square</span> 
      </div> 
     </div> 
    </div> 
</div> 

    $('.test').qtip({ 
     content: { 
      text: 'My common piece of text here' 
     }, 
     position : { 
      my : 'top center', 
      at : 'top center' 

     } 
    }) 

这是我想拥有的一切：http://take.ms/gIh67

可以reccomend我该怎么办？也许我应该采取另一个工具提示插件，而不是qtip2？感谢的

Answer 1

下面是使用基于您的html结构的CSS的工具提示。

html元素

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 tooltip-item "> 

     <div class="wrapper"> 
      <div class="first-line"> 
       2 min 
      </div> 
      <div class="second-line"> 
       from 
      </div> 
      <div class="destinations-line"> 
      <span>square</span> 
      </div> 
      <div class="tooltip"> 
       <span><img src="http://icons.iconarchive.com/icons/graphicpeel/balloons/512/Small-Twitter-Logo-in-Pink-icon.png"> 
       </span><span>I am a tooltip!</span> 
      </div> 
     </div> 
    </div> 
</div> 

的CSS

.wrapper { 
    text-transform: uppercase; 
    background: #ececec; 
    color: #555; 
    cursor: help; 
    font-family: "Gill Sans", Impact, sans-serif; 
    font-size: 20px; 
    margin: 100px 75px 10px 75px; 
    padding: 15px 20px; 
    position: relative; 
    text-align: center; 
    width: 200px; 
    -webkit-transform: translateZ(0); /* webkit flicker fix */ 
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */ 
} 

.wrapper .tooltip { 
    background: #1496bb; 
    bottom: 100%; 
    color: #fff; 
    display: flex; 
    left: -25px; 
    margin-bottom: 15px; 
    opacity: 0; 
    padding: 20px; 
    pointer-events: none; 
    position: absolute; 
    width: 100%; 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
     -ms-transform: translateY(10px); 
     -o-transform: translateY(10px); 
      transform: translateY(10px); 
    -webkit-transition: all .25s ease-out; 
    -moz-transition: all .25s ease-out; 
     -ms-transition: all .25s ease-out; 
     -o-transition: all .25s ease-out; 
      transition: all .25s ease-out; 
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
     -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
     -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
} 

/* This bridges the gap so you can mouse into the tooltip without it disappearing */ 
.wrapper .tooltip:before { 
    bottom: -20px; 
    content: " "; 
    display: block; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

/* CSS Triangles - see Trevor's post */ 
.wrapper .tooltip:after { 
    border-left: solid transparent 10px; 
    border-right: solid transparent 10px; 
    border-top: solid #1496bb 10px; 
    bottom: -10px; 
    content: " "; 
    height: 0; 
    left: 50%; 
    margin-left: -13px; 
    position: absolute; 
    width: 0; 
} 

.tooltip img{ 
    width: 50px; 
} 

.tooltip span{ 
    vertical-align: middle; 
} 

.wrapper:hover .tooltip { 
    opacity: 1; 
    pointer-events: auto; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
      transform: translateY(0px); 
} 

/* IE can just show/hide with no transition */ 
.lte8 .wrapper .tooltip { 
    display: none; 
} 

.lte8 .wrapper:hover .tooltip { 
    display: block; 
}