Jquery 有可能让qtip看起来像这样吗？_Jquery_Background_Background Image_Styling_Qtip

Jquery 有可能让qtip看起来像这样吗？

jquery

Jquery 有可能让qtip看起来像这样吗？,jquery,background,background-image,styling,qtip,Jquery,Background,Background Image,Styling,Qtip,我想知道我是否可以使qtip bubble看起来像这样：请注意，我使用了4个图像：左、中、右和下我不想你们把球发给我，但我想在我开始之前确保它是可行的，如果你们能给我一个方向，在哪里看或开始 <div class="qtip qtip-stylename"> <div class="qtip-tip" rel="cornerValue"></div> <div class="qtip-wrapper"> <d

我想知道我是否可以使qtip bubble看起来像这样：

请注意，我使用了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>


//仅在使用圆角时出现
//所有CSS样式。。。
//…通常应用于。。。
//…为了这三个元素！
//仅在使用圆角时出现

问题是我知道如何设置上/下图像，但不知道如何设置左/右图像：我认为您应该放弃这种添加圆角的方式，使用CSS3，这将是实现这一点的最小代码，具有非常跨浏览器的可比性

例如：

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

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

例如：

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

Edit：虽然我的答案仍然基本适用，但自发布以来qTip的变化已经导致此处显示的CSS不再完全准确。需要进行一些调整才能解决此问题，以便与新版本一起使用。

由于气泡图像的质量和大小，很难确切地说出气泡图像的外观，但从我收集的信息来看，在CSS中重新创建气泡图像的外观非常简单，正如其他人已经提到的那样

我知道你不想这样做，但对我来说，回答你问题的最好方法是尝试并尝试重新创建它。然而，这还没有完全完成。您必须对此进行调整，以使其在非webkit浏览器中工作（cough IE cough filter style cough）；）

基本上，这里的关键是将提示内容包装在一个容器中，您可以使用该容器创建双边框效果

就像我说的，很难说边界到底是什么样子。如果外部边框更厚，颜色也不同（这可能是基于您的评论），同样的原则仍然适用，因此您应该能够找到它（编辑：请参阅下面我的第二个演示）。祝你好运

下面是我在JSFIDLE上的工作演示：

这里有一个替代版本，使用填充和两种透明背景色来模拟边框：

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

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

基本上，这里的关键是将提示内容包装在一个容器中，您可以使用该容器创建双边框效果

下面是我在JSFIDLE上的工作演示：

这里有一个替代版本，使用填充和两种透明背景色来模拟边框：

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

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

我以为qtip有自己的无图像圆角技术？你在干什么？qTip2有自己的样式表，您可以修改它以获得这种外观。@sparky672使用左、中、右和底部图像？？我的观点是：当可以通过简单修改qTip2中包含的CSS来完成相同的操作时，为什么要用图像创建它？边框不是一种颜色，它们有两种颜色（请缩放到第一幅图像）我以为qtip有自己的无图像圆角技术？你在干什么？qTip2有自己的样式表，您可以修改它以获得这种外观。@sparky672使用左、中、右和底部图像？？我的观点是：当可以通过简单修改qTip2中包含的CSS来完成相同的操作时，为什么要用图像创建它？边框不是一种颜色，它们有两种颜色（请缩放到第一幅图像）我完全同意你的看法，但我们需要IE6/7的支持：（但半径也不是单色的，它就像一个双电波（黑色和灰色（也许你需要放大它来检查））好的，我完全知道你面对IE UUUU CH的痛苦！！因此在这种情况下，我建议你使用表格而不是div，因为它将确保圆角的位置，并且不会导致任何定位问题。实际上我已经准备好了布局。我编写了自定义工具提示插件，但我面临着几个问题…我认为可能是这样的qtip/qtip2更容易使用：插件：只要用户看到它，我个人认为IE6/7中的直角工具提示就足够了。图像角只是古老的互联网tymes中的一种过时做法。但是半径不是单一颜色，它就像一个双电波（黑色和灰色（也许你需要放大它来查看））我完全同意