Question

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

enter image description here

请注意我使用的是4张图片：左，中，右和下;

enter image description here

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

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

Answer 2

我认为你应该放弃这种添加圆角的方式，并使用CSS3，这将是最小的代码，具有非常跨浏览器的可比性。

示例：

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

有可能让q tip看起来像这样吗？

2 个答案: