Is it posible to make qtip look this way?

i would like to know if I can make qtip bubble looke like this:

Please note that i'm using 4 images: left, center, right and bottom;

I don't want you to guys serve it me done but i want to make sure that it's posible before I start and if you can give me a direction where to look or start.

<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&g开发者_如何学JAVAt;
</div>

The thing is i know how to set top/bottom images but not the left/right ones :s

---

Edit: While my answer still largely applies, changes in qTip since this was posted have caused the CSS shown here to no longer be entirely accurate. Some adjustments will be needed to fix this to work with newer versions.

It's hard to tell exactly what your bubble image looks like due to the quality and size, but from what I can gather, it is very trivial to re-create that exact look in CSS as others have already mentioned.

I realize you didn't want this served done, but the best way to answer your question for me was to experiment and try to re-create it. It's not completely done, however. You'll have to tweak this to get it to work in non-webkit browsers (cough IE cough cough filter style cough) ;)

Basically, the key here is to wrap your tip contents in a container that you can use to create the double-border effect.

like I said though, it's hard to tell exactly what the border looks like. If the outside border is just thicker and a different color (as it may be based on your comments), the same principle still applies, so you should be able to figure it out (Edit: see my 2nd demo of this below). Good luck!

Here's my working demo on jsFiddle:

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

And here's an alternate version using padding and two transparent background colors to simulate the border instead:

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

The classes for the first demo are defined as follows:

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

And you'll also need to specify a custom tip size in your qTip2 init to get the smaller, squared tip:

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

});

The second demo's classes are slightly different:

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

---

I think you should abandon this way of adding rounded corners and use CSS3 which will be the minimal code to do this with a very cross browser comparability.

Example:

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