Ist es posible zu machen qtip Sie so Aussehen?

Edit: Während ich meine Antwort noch weitgehend gilt, Veränderungen in qTip, da dies geschrieben wurde, die den CSS-hier angezeigt, zu nicht mehr ganz korrekt. Einige Anpassungen werden nötig sein, um dieses Update zu arbeiten, mit den neueren Versionen.

Es ist schwer zu sagen, genau das, was Ihre Blase Bild aussieht, wegen der Qualität und Größe, sondern von dem, was ich sammeln können, es ist sehr trivial, um neu zu erstellen, dass exakt in CSS wie andere bereits erwähnt haben.

Erkennen ich, dass Sie nicht wollte, dies war getan, aber der beste Weg, um Ihre Frage zu beantworten war für mich, zu Experimentieren und versuchen, neu zu erstellen. Es ist noch nicht ganz abgeschlossen, jedoch. Haben Sie zu zwicken, um es zu erhalten zu arbeiten in nicht-webkit-Browsern (Husten IE Husten Husten-filter-Stil hust) 😉

Grundsätzlich der Schlüssel hier ist, um wickeln Sie den Tipp, den Inhalt in einen Behälter, die Sie verwenden können, um die Doppel-border-Effekt.

wie ich sagte, obwohl, es ist schwer zu sagen, was genau der Grenze aussieht. Wenn die äußere Grenze ist nur dicker und in einer anderen Farbe (wie kann es sein, basierend auf Ihre Kommentare), das gleiche Prinzip gilt weiterhin, so sollten Sie in der Lage sein, um es herauszufinden, (Edit: siehe meine 2. demo von diesem unten). Viel Glück!

Hier meine funktionsfähige demo auf jsFiddle:

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

Und hier ist eine Alternative version mit Polsterung und zwei transparenten hintergrund Farben zu simulieren, die der Grenze statt:

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

Den Klassen für die ersten demo sind wie folgt definiert:

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

Und Sie müssen auch geben Sie eine benutzerdefinierte Größe der Spitze in Ihrem qTip2 init, um die kleineren, squared Tipp:

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

});

In der zweiten demo die Klassen sind etwas anders:

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