将qtip这样看是否可行？

Question

我想知道我是否可以像这样制作qtip bubble looke:

请注意我使用4张图片:左,中,右和下;

我不希望你们为我服务但是我想确保它在我开始之前是可行的,如果你能给我一个指导或开始的方向.

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

问题是我知道如何设置顶部/底部图像,而不是左/右图像:s

Answer 1

编辑:虽然我的答案仍然很大程度上适用,但自发布以来qTip的变化导致此处显示的CSS不再完全准确.需要进行一些调整才能解决此问题,以便与更新版本配合使用.

由于质量和尺寸,很难确切地说出你的泡泡图像是什么样的,但是根据我可以收集的内容,重新创建CSS的精确外观非常简单,正如其他人已经提到过的那样.

我意识到你不希望这个服务完成,但回答你问题的最佳方法是尝试并尝试重新创建它.但是,它并没有完全完成.你将不得不调整它以使其在非webkit浏览器中工作(咳嗽IE咳嗽咳嗽过滤器风格咳嗽);)

基本上,这里的关键是将您的提示内容包装在可用于创建双边框效果的容器中.

就像我说的那样,很难确切地说出边框的样子.如果外边框只是更厚和不同的颜色(因为它可能基于你的评论),同样的原则仍然适用,所以你应该能够弄明白(编辑:见下面我的第二个演示).祝好运!

这是我在jsFiddle上的工作演示:

http://jsfiddle.net/kiddailey/7Re6a/1/

这里是使用填充和两种透明背景颜色的替代版本来模拟边框:

http://jsfiddle.net/kiddailey/GDqyv/

第一个演示的类定义如下:

.doubleborder .ui-tooltip-content
{
    background-color: rgba(40,40,40,0.95);
    color: #fff;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-color: #444;
    width: 120px;
    text-align: center;
    font-family: arial, sans-serif;
    line-height: 1.25em;
    padding: 1px;
}

.doubleborder .ui-tooltip-content div
{
    border: 1px solid #666;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
}

.doubleborder .ui-tooltip-content h4 {
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 5px;
}

并且您还需要在qTip2 init中指定自定义提示大小以获得更小的平方提示:

$('.selector').qtip({
    position: {
        my: 'bottom center',
        at: 'top center'
    },
    style: {
        classes: 'doubleborder',
        tip: {
            width: 6,
            height: 4
        }
    }

});

第二个演示的类略有不同:

.doubleborder .ui-tooltip-content
{
    background-color: rgba(60,60,60,0.95);
    color: #fff;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-color: #555;
    width: 120px;
    text-align: center;
    font-family: arial, sans-serif;
    line-height: 1.25em;
    padding: 2px;
}

.doubleborder .ui-tooltip-content div
{
    background-color: rgba(40,40,40,0.95);
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
}

.doubleborder .ui-tooltip-content h4 {
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 5px;
}