komme nicht weiter mit tooltip, infoblase...

[loser007]

hallo,

ich habe ein problem und komme nicht weiter.
ich möchte einen mouseover-effekt haben in dem sich eine infoblase öffnet und dort dann weitere infos oder inhalte zu lesen sind.

ich habe mich nach dieser ( http://www.think-contao.de/tooltip-f...verwenden.html ) anleitung versucht zu richten, ich muss voraus schicken das ich keinn css genie bin, aber bei richtigen erklärungen durchaus mich in der lage sehe diese dann umzustzen.

Ich habe also das template kopiert und als "moo_tooltip.tpl" in den templateordner hochgeladen, dann im seitenlayout,dieses skript aktiviert und im skripttext -offsets auf offset- geändert.

dann wird die anleitung für mich unverständlich.

kann mir jemand ganz einfach erklären wie es dann weiter zu handhaben ist.

am besten so: kopier die css definiton für den tooltip. lege in den stylesheets ein neues stylesheet an, mit dem selektor _____ dann speichern.

zu schluss das wichtigste, das finde ich, ist in dem beispiel für mich erstmal völlig unverständlich. wie ordne ich bestimmten links oder ausgewählten textabschnitten eine infoblase zu.

ich habe viele inhaltselemente text mit dem " richtexteditor" erstellt auch links sind im editor erstellt.

es wäre nett wenn ich hilfe bekommen könnte....

[loser007]

Hallo,

das Problem ist immer noch vorhanden, so wie oben beschrieben.

Ich habe gelesen das einige mit der Anleitung gut klar kommen, ich nicht.

Das Problem bleibt das einbinden.

nehmen wir an ich habe einen Artikel mit Text erstellt im "Tinymce" und nun möchte ich für ein Wort aus dem Text mit einer Infoblase belegen, wie bekomme ich das hin.


Textbeispiel (Die Woche hat sieben Tage), wenn ich mit der Maus über das Wort Tage fahre soll eine Infoblase aufgehen wo z.B. die Wochentage drin stehen.

Es gibt im Backend ja keine Funtion Tooltip


Kann mir bitte Jemand helfen....

[wulf]

markiere im tinymce das wort, welches ein tooltipp erhalten soll, klicke auf die schaltfläche "link einfügen/bearbeiten". es erscheint eine eingabemaske: hier gibst du bei css-klasse tooltip ein, im titel kommt die überschrift von dem tooltipp, zB. wochentage und in adresse kommt der eigentliche tooltip-text.

siehe screenshot

das aussehen der toolbox wird im css bestimmt

[loser007]

markiere im tinymce das wort, welches ein tooltipp erhalten soll, klicke auf die schaltfläche "link einfügen/bearbeiten". es erscheint eine eingabemaske: hier gibst du bei css-klasse tooltip ein, im titel kommt die überschrift von dem tooltipp, zB. wochentage und in adresse kommt der eigentliche tooltip-text.

siehe screenshot

das aussehen der toolbox wird im css bestimmt

Danke für deine Hilfe, werde es heute noch ausprobieren

[loser007]

Es klappt noch nicht. Ich gehe davon aus das ich das einfach noch nicht raffe.
wie ich schon geschrieben habe, alles genau nach anleitung gemacht

template hochgeladen, skript moo_tooltip aktiviert. dann die css definition kopiert und in eine neue formatdefinition in contao gepackt.
ich habe unten mal zur ansicht die definition angehängt.
wenn ich dann alles so mache wie von "wulf" beschrieben kommt kein ergebnis.
wnn ich den text markiere dann auf link einfügen/bearbeiten gehe, gehe ich bei css klasse auf "wert" und schreibe hier tooltip rein.
adresse und titel fülle ich auch aus, speichere dann ab und es passiert nichts.

ich mache irgendwo bockmist aber wo??



--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Contao Open Source CMS 2.11.4


Themes - Stylesheets
Anzeigen:
1 - 12
Suchen:
Kategorie
=
Filtern:
-
Zurück :: Neue Formatdefinition :: Mehrere bearbeiten
Stylesheet bearbeiten Oben einfügen
Name: basic-07d17d0e (Kopie)
Änderungsdatum: 2013-03-25 17:45
Medientypen: all, braille

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 146 erstellen

body {
margin:0;
padding:0;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 147 erstellen

a, body, div, em, input, label, legend, li, ol, p, select, span, strong, td, th, textarea, u, ul {
font-family:Ubuntu,sans-serif;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 148 erstellen

a, body, div, input, label, li, legend, ol, p, select, td, th, textarea, u, ul {
font-size:12px;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 149 erstellen

h1 {
margin:0 0 12px;
padding:0;
font-size:14px;
font-weight:bold;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 150 erstellen

h2 {
margin:0 0 6px;
padding:0;
font-size:12px;
font-weight:bold;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 151 erstellen

a {
text-decoration:none;
color:#a84204;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 152 erstellen

a:hover {
text-decoration:underline;
color:#a84204;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 153 erstellen

img {
vertical-align:middle;
border:0px;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 154 erstellen

p, pre, form, figure {
margin:0;
padding:0;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 155 erstellen

table {
border-spacing:0;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 156 erstellen

:focus {
outline:0;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Element nach der Formatdefinition ID 309 erstellen

.tool {
/* Style sheet tooltip */
/* Gesamtbreite für den Tooltip definieren */
.tool
{width:500px;
}
/* Definitionen für den Tooltip-Titel definieren */
.tool .tip-title
{
margin:0 0 10px 0;
padding:10px 20px;
font-family:verdana,arial,sans-serif;
font-weight:bold;
font-size:1.2em;
color:#fff;
background:#666;
/* Gecko-Browser (Firefox) */
-moz-box-shadow:2px 2px 8px #999;
/* Webkit-Browser (Safari, Chrome) */
-webkit-box-shadow:2px 2px 8px #999;
/* allgemein CSS3 */
box-shadow:2px 2px 8px #999;
}
/* Definitionen für den Tooltip-Beschreibungstext definieren */
.tool .tip-text
{
margin:0;
padding:10px 20px;
font-family:verdana,arial,sans-serif;
font-size:1.1em;
line-height:1.7;
background:#fff;
/* Gecko-Browser (Firefox) */
-moz-box-shadow:2px 2px 8px #999;
/* Webkit-Browser (Safari, Chrome) */
-webkit-box-shadow:2px 2px 8px #999;
/* allgemein CSS3 */
box-shadow:2px 2px 8px #999;
}
}

Contao Open Source CMS 2.11 :: Nach oben :: Frontend-Vorschau

[Lego2013]

Ich denke mal, die CSS-Klasse heisst nicht .tool sondern .tooltip

Und woher kommen die Klassen .tip-text und .tip-title?

[wulf]

die klasse tooltip ist schon richtig, wird von dem script benötigt. sieht eigentlich alles richtig aus.
welche contao version nutzt du eigentlich und was heißt, es passiert garnichts, selbst wenn das script und das css falsch eingebunden ist, müsste das markierte wort im frontend als link dargestellt werden und beim drüberfahren mit der maus den tipp "wochentag" auswerfen.

[ciaobello]

Die Anleitung die Du für die Tooltips verwendest ist noch für Contao 2.9 erstellt worden.

Aenderung Nr.1:
Mittlerweile musst Du die Vorlagen entsprechend dem im Seitenlayout >> Experten Einstellung gewählten Ausgabeformat anpassen Bsp. Wenn Du xhtml verwendest ist die Endung der Vorlage .xhtml .Verwendest Du für das Ausgabeformat html5 musst Du die .tpl nach .html5 benennen.

Aenderung Nr.2:

offsets: {'x': 20, 'y': -100 }, // Versatz des Tooltips11.
// ab MooTools 1.3 wird offset ohne s verwendet.

Ab wann die MooTools Version gewechselt hat guckst du am Bestem im Changelog auf contao.org

Anmerkung Nr.3:
Ich habe bei mir ein Modul mit "Eigenen HTML Code" erstellt und dort das von der Webseite rein geschmissen und angepasst (qualifisio.net):

<a class="tooltip" title="Trocar a resolução do browser temporariamente!" rel="Trocar a resolução com browser atuais [lt]br [gt][lt]/a[gt](Firefox 3.6, Chrome, Safari, Opera, Internet Explorer da versão 8) mudar com a combinação das teclas:[lt]br [gt][lt]/a[gt][lt]br [gt][lt]/a[gt]
[lt]strong[gt]CTRL +[lt]/strong[gt] (Aumentar)[lt]br /[gt]
[lt]strong[gt]CTRL -[lt]/strong[gt] (Deminuir)[lt]br /[gt]
[lt]strong[gt]CTRL 0[lt]/strong[gt] (Zero – voltar para o padrão).[lt]br /[gt][lt]br /[gt]
Em combinação com a tecla [lt]strong[gt]CTRL e a roda de rolagem do MOUSE[lt]/strong[gt] também e possível mudar o tamanho da resolução da janela do browser.[lt]br /[gt][lt]br /[gt]
Com APPLE MAC usa a tecla APLE-TECLA em lugar da tecla CTRL." tabindex="0">A+ A A-</a>

p.s.
Nummer2 hat bei mir auch nicht mehr funktioniert. Erst Durch erstellen dieses Themas und genauem durchlesen hab ich es gesehen was zu ändern ist. Danke @magicsepp.

[loser007]

hallo,

der tooltip funktioniert jetzt ja.

ich möchte den tooltip nun gerne gestalten und möchte das er so aussieht wie hier im beispiel http://www.pixelfreu.de/blog/details...-tooltips.html ,
und zwar das beispiel kurzinfo.

folgende css-definition ist dort angegeben

__________________________________________________ __________

.tooltip {
display:inline-block;
position:relative;
cursorointer;
}

.tooltip2 {
color:#e74c3c;
text-decoration:underline;
}
.tooltip2:hover,
.tooltip2:focus {
text-decoration:none;
}
.tooltip2:before,
.tooltip2:after {
transition:all 500ms;
}
.tooltip2:before {
content:"?";
display:inline-block;
position:relative;
z-index:1001;
margin-right:.5em;
padding:.2em .5em;
font-size:.8em;
border:.1em solid #e74c3c;
border-radius:50%;
}
.tooltip2:hover:before,
.tooltip2:focus:before {
color:#fff;
border-color:#fff;
}
.tooltip2:after {
content:attr(data-tooltip-text);
display:block;
opacity:0;
visibility:hidden;
position:absolute;
z-index:1000;
bottom:-3em;
min-width:15em;
padding:.5em .5em .5em 2em;
color:#fff;
text-indent:-1.3em;
background:#e74c3c;
border-radius:.3em;
border-bottom-left-radius:10px;
}
.tooltip2:hover:after,
.tooltip2:focus:after {
bottom:0;
opacity:1;
visibility:visible;
}

---------------------------------------------------------------------------------------------

für mich als css laie wäre es gut wenn mir jemand ganz einfach erklären könnte....

gehe bei contao in die stylesheets, lege eine neue formatdefinition an, im selektor kommt folgendes rein ( . xy usw. ),

so das eine zuordnung für den tooltip stattfindet.

so das ich im ergebnis einen infotext mit zeilenumbruch und roten hintergrund habe, wie hier schon beschrieben arbeite ich mit dem tinymce, gehe über die schaltfläche "einfügen" und gebe dort in dem feld "titel" den text
für den tooltip ein, das sieht dann genauso aus wie auf dieser seite wenn man mit der maus oben über
"Thema: komme nicht weiter mit tooltip, infoblase..." geht auch mit der verzögerung der anzeige. bei dem demo-beispiel von der oben angegebenen seite ist der tooltip sofort sichtbar,sobald die maus über den text geht.

ich hoffe mir kann jemand helfen.

[wulf]

Die in diesem Thread genannte Lösung basiert auf einem mootool-script, deine Version aus dem Blog ist eine reine CSS-Lösung.
Hier eine Vorgehensweise für dein Tutorial:

- kopiere das css in einem Texteditor deiner Wahl und speicher die Datei unter meinCSS.css im Ordner /files
- gehe in dein Seitenlayout und binde deine CSS-Datei über "zusätzliche Stylesheets" ein (speichern nicht vergessen)

alternativ kannst du auch den internen css-editor von contao nutzen

jetzt kannst du in tinymce einfach mal auf die Schaltfläche "html" anklicken und folgenden Text reinkopieren:

<span class="tooltip tooltip2" data-tooltip-text="Tooltipp-Text">Text mit Tooltipp</span>

(aktualisieren nicht vergessen)

Wenn du alles richtig gemacht hast, sollte in der Vorschau beim drüberfahren von "Text mit Tooltipp" ein entsprechender Tooltipp erscheinen.

PS: Im Vorschau-Modus zickt das CSS gelegentlich, sprich der Tooltipp erscheint nicht sofort. In der "normalen" Seitenansicht tritt dieser Fehler nicht auf

[loser007]

erst einmal danke für die antwort.

es klappt nach nicht.

ich habe mit dem css-code im editor eine neue meinCss.css Datei erstell, habe diese in verzeichnis tl-files auf den server geladen, danach im in den stylesheet diese datei importiert und dann im seitenlayout angeklickt.

wenn ich nun im tinymce irgend ein wort auswähle das makiere, weiss ich nicht wie es weiter geht.

wenn ich im artikel den tinymce anklicke und dann auf html gehe habe ich dort schon einen lanegn html-code stehen, ich bin noch nicht ganz klar wie der html-code von dir einfügen soll.
vielleicht habe ich auch hier schon einen fehler gemacht, so wie ich das gemacht habe.

ich muss ja irgendwie das wort auswählen das den tooltip anzeigen soll.

[wulf]

Bis jetzt hast du anscheinend alles richtig gemacht. Die CSS- Variante ist allerdings etwas anders, als die mootool-version, hier kann man nicht einfach mal ein Wort markieren und per "Link-Maske" Daten eingeben.
Gehe nochmal mit tinymce in die html-Ansicht und suche dir das Wort, welches einen Tooltipp erhalten soll. Jetzt musst du den entsprechenden Code einfügen:

Beispiel:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>

Wenn "eltir" einen Tooltip bekommen soll, müsste der Code so verändert werden:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing <span class="tooltip tooltip2" data-tooltip-text="Tooltipp-Text">eltir</span>, sed diam</p>

Ist leider alles andere als komfortabel, aber ich habe noch kein plugin für den tinymce gesehen, mit dem man es einfacher realisieren kann.

[loser007]

hallo und vielen dank,

genauso gemacht, und es klappt, ein kleines problem der tooltip erscheint etwas sehr weit unten also nicht im direkten bereich des mausanzeigers, liegt das an der css einstellung?
ich denke das ich das wort im tinymce das den tooltip erhalten soll, auch anders farbig einstellen kann, ebenso das fragezeichen einfach löschen kann.

wenn ich jetzt eine weitere meinCss2.css anlegen möchte, einfach mit anderen einstellungen farbe, schriftgröße,...usw, wie unterscheide ich die intern. müsste dann im css-code überall wo "tooltip2" steht
dann eine datei mit "tooltip3" angelet werden, so das dass system das unterscheidet.

Es gibt ja auf der seite http://www.pixelfreu.de/blog/details...-tooltips.html auch das beispiel 3 mit der lightbox-variante wäre das in etwa auch so umzusetzen wie das jetzt funktionierende beispiel.


gibt es denn vielleicht auch eine weitere leichtere möglichkeit einen schön gestylten tooltip anzulegen.

[wulf]

Beispiel 3 funktioniert auch. Du kannst den CSS Code bequem in deine schon vorhandene Datei einfügen, gehe einfach auf die Dateiverwaltung von Contao, suche deine CSS Datei und klicke dann auf "bearbeiten" (letztes Symbol). Es erscheint ein Editor, in dem du den Code einfach reinkopieren kannst.
Jetzt brauchst du nur noch in

<p>Lorem ipsum dolor sit amet, consetetur sadipscing <span class="tooltip tooltip2" data-tooltip-text="Tooltipp-Text">eltir</span>, sed diam</p>

tooltip2 in tooltip3 zu ändern.

Eigene Styles gehen genauso, für CSS-Anfänger ist es wohl am einfachsten, wenn sie sich den Original.Code ihrer "Lieblingsbox" kopieren, alle Selektoren zB toolbox2 in toolbox4 unbenennen und dann den Code verändern usw.

[loser007]

hallo und danke für die schnellen antworten,

ich werde das mit den anderen beispielen morgen-abend ausprobieren.

kannst du mir vielleicht sagen warum der tip so weit unten angezeigt wird, muss ich einen wert in der css-datei ändern damit er direkt am mousanzeger erscheint.

ist es vielleicht der wert von z-index: 1000 der geändert werden muss.

.tooltip2:after {
content:attr(data-tooltip-text);
display:block;
opacity:0;
visibility:hidden;
position:absolute;
z-index:1000;
bottom:-3em;
min-width:15em;
padding:.5em .5em .5em 2em;
color:#fff;
text-indent:-1.3em;
background:#e74c3c;
border-radius:.3em;
border-bottom-left-radius:10px;
}

[wulf]

Die Position kannst du hier einstellen:

.tooltip2:hover:after,
.tooltip2:focus:after {
  bottom:50px;              //hier einen positiven Wert für "weiter oben anzeigen" oder einen negativen Wert für "weiter unten anzeigen" (zB bottom: -70px)
  opacity:1;
  visibility:visible;
}

Damit Contao keine Qual für dich wird, solltest du einfach mal etwas CSS lernen, es gibt unzählige Anleitungen und Nachschlagewerke im Netz zb. http://www.codecademy.com/ usw