jQuery Tooltips Plugin qtip2 - Wie definiert man benutzerdefinierte Stile wie qtip1?

Question

Ich benutze das große jquery Tooltip-Plugin qtip 2. Überprüfen Sie es, wenn Sie noch nicht haben.

Kann jemand Ihre eigenen benutzerdefinierten CSS (Tooltip Farben, Rahmen, Hintergründe, Radius, etc.) für den Tooltip im Gegensatz zu den vordefinierten Tooltip Stile definieren?

Was ich versuchte:

• ich ihren Style-Guide überprüft, aber es hatte nichts eigene Stile auf definieren. http://craigsworks.com/projects/qtip2/docs/style/
• versucht, ihre Foren, aber sie waren nach unten (jetzt zurück nach oben)
• Zu meiner eigenen Tooltip Klassen zu erstellen und diese
• konvertieren über meine qtip Version 1 Style-Definitionen (gescheitert)

Wenn Referenz Diese Frage hat dir geholfen, lass es mich wissen!

Answer 1

Ich lege das nur in mein Stylesheet. Verwenden aller Eigenschaften, benötigen Sie ...

.ui-tooltip .ui-tooltip-content, 
.ui-tooltip p, 
.ui-tooltip ul, 
.ui-tooltip li, 
.ui-tooltip, 
.qtip { 
    max-width: 280px; 
    min-width: 50px; 
    font-size: 17px; 
    line-height: 19px; 
    text-align: center; 
    border-color: #666; 
} 

Sie könnten auch nur Ihre eigene erstellen, indem man aus dem jquery.qtip.css Blatt ziehen und bearbeiten. Verwenden Sie mystyle genauso wie Sie einen der vordefinierten qTip2 Stile.

/*! mystyle tooltip style */ 
.ui-tooltip-mystyle .ui-tooltip-titlebar, 
.ui-tooltip-mystyle .ui-tooltip-content{ 
    border-color: #303030; 
    color: #f3f3f3; 
} 
.ui-tooltip-mystyle .ui-tooltip-content{ 
    background-color: #505050; 
} 

.ui-tooltip-mystyle .ui-tooltip-titlebar{ 
    background-color: #404040; 
} 

.ui-tooltip-mystyle .ui-tooltip-icon{ 
    border-color: #444; 
} 

.ui-tooltip-mystyle .ui-tooltip-titlebar .ui-state-hover{ 
    border-color: #303030; 
} 

Answer 2

Ich persönlich habe 5 Themen zu meiner Website. Ich benutze dafür jQuery UI's ThemeRoller. jQuery UI und qTip2 verwenden dieselben Klassennamen.

Die einzige Einschränkung, die ich gefunden habe, war die Reihenfolge, in der Sie die CSS-Dateien eingefügt haben. Sie müssen die qTip2-Stile überschreiben. Fügen Sie einfach die CSS-Datei jQuery UI nach der qTip2-CSS-Datei ein.

es auf diese Weise tun können Aktualisierungen qTip2 nach unten ziehen, ohne sich um Ihre individuelle qTip2 Arten kümmern außer Kraft gesetzt werden, sowie Sie eine nette GUI geben Sie Ihr Thema in.