Info Box

[Preetz]

Hi zusammen,

für mich ist irgendwie nicht ersichtlich, wie diese Info-Box erstellt wurde:
http://www.vitarium-kiel.de/kurse.html

Hat jamend nen Tipp für mich?

Danke
Preetz

[ways2web]

hiermit ?

http://www.contao.org/erweiterungsli...etable.de.html

[Preetz]

Danke!

Schon mal super! Aber wie erstellt man diese Hover-Boxen mit den Infos die eingeblendet werden, wenn man drüber fährt?

Preetz

[schman]

entweder via CSS3 oder via MooTools (Tooltip). Dafür gibts auch eine Anleitung, allerdings nicht mehr wirklich verfügbar deshalb nur im Cache. Damals wurde es noch mit 2.7 gemacht.

[xchs]

Diese Anleitung gibt es auch hier im neuen Forum, sowie auf think-contao.de

[Rubin]

Diese Anleitung gibt es auch hier im neuen Forum, sowie auf think-contao.de

Hallo allerseits,
mit Contao habe ich eine neue Welt entdeckt!!! Einfach Klasse!!! (musste ich endlich los werden )

Nun bin ich seit 3 vollen Tagen an einem Problem. Tooltips weder Mootools-Tooltips von Harry, noch von think-contao.de funktionieren nicht.

Ich benutze contao 2.9.5 und zwar auf mehreren Domains/Hostern und habe auf mehreren installationen versucht tooltips zum anzeigen zu bringen.
Mit Firebug kann ich den Tooltip-Tekst an dem Link sehen, aber leider nicht im Browser selber. ansicht.jpg

Darauf habe ich die Extention "glossary" installiert, da sonst ja jede Extention auf anhieb lief, die aber leider nicht. Wenn ich die Module GlossarMenü und GlossarListe im Seitenlayout einbinde, dann bekomme ich ein weisses Fenster.( Glossar und Begriff ist auch angelegt und in den Modulen ausgewählt.

Versuchsweise habe ich die Mootools von Google laden lassen, ohne Erfolg.

Ich bin neu in Sachen Programmierung. Da es aber mit Contao so einfach geht, habe ich schon um die 10 Projekte realisiert, alle mit 2.9.5.
Nur dieser eine Punkt bringt mich zum Verzweifen.

Kann mir jemand bitte Helfen?
In diesem Beispiel müsste tooltip zu Menüpunkt "Home" erscheinen. und ich habe diese Methode angewandt.

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	var myTips = new Tips($$('.tooltip'),
	{
		showDelay: 0,    //Verzögerung bei MouseOver
		hideDelay: 100,   //Verzögerung bei MouseOut
		className: 'tool', //CSS-Klassennamen --> CSS-Definitionen
		offsets: {'x': 20, 'y': -100 }, // Versatz des Tooltips
		fixed: true, // false = Tooltip bewegt sich mit dem Mauszeiger, true=Tooltip bewegt sich nicht
	});

// zeigt den Tooltip bei Fokus an | ergänzt 02.01.2011

	$$('.tooltip').each(function(el) {
		el.addEvent('focus', function(event){
			myTips.elementEnter(event, el);
		}).addEvent('blur', function(event){
			myTips.elementLeave(event, el);
		});
	});
});
//--><!]]>
</script>

Ich kann gerne die Zugangsdaten geben!
Gruß
Rubin

[xchs]

Hast Du versucht, das Ganze mal ohne jQuery zu testen?

[Rubin]

Hast Du versucht, das Ganze mal ohne jQuery zu testen?

Hallo xchs,
hab gerade die jQuery, was für die Slideshow da ist aus dem Seitenlayout abgewählt. Tooltip funktioniert nicht und der Code erscheint jetzt unter der seite ansicht.jpg

Hättest Du noch eine Idee??

[xchs]

Ich kann auf Deiner Seite keinen Code für die MooTools Tips()-Funktion finden.

[Rubin]

Hallo, ja ich hatte den moo_tooltip aus dem Seitenloyout abgewählt, da es verursacht hatte, dass der Code am Ende der Seite angezeigt wurde. Die Seite ist aber online.
Dann habe ich den moo_tooltip code noch mal von think-contao kopiert und hochgeladen und es klappte plötzlich mit tooltip!!! Danke an dieser Stelle noch mal für die Geduld mit mir!

Das gleiche habe ich auf der anderen Installation gemacht (2.9.5), da wo ich es eigentlich dringend brauche, aber es will nicht gehen
Link ist hier. Über dem Menüpunkt Home soll Tooltip erscheinen. Den text kann ich im Firebug sehen ansicht.jpg.

moo-tooltip.tpl ist frisch von think-contao.de kopiert, in den Ordner template geladen und im Seitenloayout ausgewählt.

Was mache ich nun falsch?

[Nina]

Hast du bei der zweiten Seite denn überhaupt den nötigen CSS-Code eingebunden?

[Rubin]

hallo,
ich habe diese Anleitung befolgt: jukemedia.de
moo_tooltip.tpl im seitenlayout eingebunden.

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	var myTips = new Tips($$('.tooltip'),
	{
		showDelay: 0,    //Verzögerung bei MouseOver
		hideDelay: 100,   //Verzögerung bei MouseOut
		className: 'tool', //CSS-Klassennamen --> CSS-Definitionen
		offsets: {'x': 20, 'y': -100 }, // Versatz des Tooltips
		fixed: true, // false = Tooltip bewegt sich mit dem Mauszeiger, true=Tooltip bewegt sich nicht
	});

// zeigt den Tooltip bei Fokus an | ergänzt 02.01.2011

	$$('.tooltip').each(function(el) {
		el.addEvent('focus', function(event){
			myTips.elementEnter(event, el);
		}).addEvent('blur', function(event){
			myTips.elementLeave(event, el);
		});
	});
});
//--><!]]>
</script>

nav_default.tpl in ordner template geladen und im Modul MainNavi ausgewählt.

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php $blnTP = (strlen($item['tooltip'])) ? true : false; ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo ($blnTP) ? 'tooltip ' : ''; ?>active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"<?php echo ($blnTP) ? ' rel="' . $item['tooltip'] . '" ' : ''; ?>><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class'] || $blnTP): ?> class="<?php echo ($blnTP) ? 'tooltip ' : ''; ?><?php echo $item['class']; ?>"<?php endif; ?><?php echo ($blnTP) ? ' rel="' . $item['tooltip'] . '" ' : ''; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

tooltip.css auch von der seite gedownloadet und im Seitenlayout eingebunden

/* Style sheet tooltip */
#left .tool
{
	display:none;
}

.tool
{
	width:245px;
	margin-top:-135px;
	margin-left:-15px;
}

.tool .tip-text
{
	height:70px;
	position:relative;
	margin:0;
	padding:10px 20px;
	border:3px solid #fff;
	font-family:verdana,arial,sans-serif;
	font-size:10px;
	line-height:1.2;
	background:#E5EA93 url("tl_files/images/site/arrow-tooltip.png") center bottom no-repeat;
	/* 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;
}

...irgendwo hackt es ((
im ersten Beispiel hat es irgendwie geklappt.... hier leider noch nicht

[Rubin]

ich habe gerade die haupt css-datei der seite ausgeschaltet und sieh da tooltip erscheint!!!!
Ich suche also darin, welcher eintrag gestört hat.

Vielen Dank für die Hilfe!