Можно ли заставить qtip выглядеть таким образом?

Question

Я хотел бы знать, смогу ли я заставить пузырь qtip выглядеть следующим образом:

Обратите внимание, что я использую 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, кашель, стиль фильтра, кашель, кашель);)

По сути, ключом здесь является упаковка содержимого чаевых в контейнер, который выМожно использовать для создания эффекта двойной границы.

Как я уже сказал, трудно точно сказать, как выглядит граница.Если внешняя граница просто толще и имеет другой цвет (как это может быть основано на ваших комментариях), тот же принцип все еще применяется, поэтому вы должны иметь возможность выяснить это (Edit: см. Мою 2-ую демонстрацию этого ниже).Удачи!

Вот мое рабочее демо на 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чтобы получить меньший квадратный наконечник:

$('.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;