✔ Tooltip

Bobgar · 7. Juni 2008

Hi, ich bekomme diesen Tooltip nicht zum laufen. Ich habe bisher diesen code

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/prototip.js'></script>
<link rel="stylesheet" type="text/css" href="css/prototip.css" />
<script type="text/javascript" language="javascript">
			new Tip('demo_click1', "Tooltips can be set to show on click.", {
				title: "Click",
				closeButton: true,
				showOn: 'click',
				hideOn: { element: 'closeButton', event: 'click'},
				stem: 'bottomMiddle',
				hook: { target: 'topMiddle', tip: 'bottomMiddle' },
				offset: { x: 0, y: -2 },
				width: 'auto'
			});

			new Tip('demo_click2', "Click the element again to close this tooltip.", {
				title: "Toggle",
				style: 'protoblue',
				showOn: 'click',
				hideOn: 'click',
				target: $('demo_click2').up('li'),
				stem: 'bottomLeft',
				hook: { target: 'topRight', tip: 'bottomLeft' },
				offset: { x: -6, y: 0 }
			});
			</script>

</head>
<li class='box'>
			<div class='wrapper'>
				<div class='demo' id='demo_click1' style='margin-right: 2px' new Tip(element, 'content');>asdasdasd</div>
				
			  <div class='description'>Click</div>

			</div>

			
		</li>
<body>
</body>
</html>

ich möchte den "Click" tip der dort zum testen ist.

Danke für eure Hilfe.

Lg

Maik · 7. Juni 2008

Hi,

wenn du auf der Seite http://www.nickstakenburg.com/projects/prototip2/ den Quellcode der Demo-Varianten näher betrachtest, siehst du, dass die einzelnen Scripts zum Erzeugen der Tooltips im jeweiligen Listenpunkt .box, und nicht im Dokumentheader eingebunden sind.

mfg Maik

Bobgar · 8. Juni 2008

also habs mir angeschat habs jetzt so geändert:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/prototip.js'></script>
<link rel="stylesheet" type="text/css" href="css/prototip.css" />


</head>
<li class='box'>
			<div class='wrapper'>
				<div class='demo' id='demo_click1' style='margin-right: 2px'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click1.gif' alt=''/></div>
				<div class='demo' id='demo_click2'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click2.gif' alt=''/></div>
			 

			</div>

			<script type="text/javascript" language="javascript">
			new Tip('demo_click1', "Tooltips can be set to show on click.", {
				title: "Click",
				closeButton: true,
				showOn: 'click',
				hideOn: { element: 'closeButton', event: 'click'},
				stem: 'bottomMiddle',
				hook: { target: 'topMiddle', tip: 'bottomMiddle' },
				offset: { x: 0, y: -2 },
				width: 'auto'
			});

			new Tip('demo_click2', "Click the element again to close this tooltip.", {
				title: "Toggle",
				style: 'protoblue',
				showOn: 'click',
				hideOn: 'click',
				target: $('demo_click2').up('li'),
				stem: 'bottomLeft',
				hook: { target: 'topRight', tip: 'bottomLeft' },
				offset: { x: -6, y: 0 }
			});
			</script>
		</li>

<body>
</body>
</html>

Bin leider ein js .

Maik · 8. Juni 2008

Hi,

mit dem nachfolgenden Quellcode bist du nun einen bedeutenden Schritt weiter

Ich muss hier aber auch eine Lanze für dich brechen und zu deiner Entlastung einräumen, dass der Autor diverse erforderliche CSS-Formatierungen in der CSS-Datei http://www.nickstakenburg.com/projects/prototip2/css/style.css versteckt hat, die absolut unformatiert "einzeilig" daherkommt, sodass man sich darin erstmal einen Wolf nach den erforderlichen Code-Schnipseln sucht.

Die drei Selektoren mit den CSS-Regeln hab ich hier im <style>-Tag untergebracht.

Du musst halt schauen, welche der CSS-Eigenschaften tatsächlich benötigt werden, und welche getrost in die Tonne gekloppt werden können ;-)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/prototip.js'></script>
<link rel="stylesheet" type="text/css" href="css/prototip.css" />
<style type="text/css">
<!--
.demos{
position:relative;
float:left;
margin-left:300px;
list-style-type:none;
margin-top:300px;
clear:both;
}

.demos .box{
list-style-type:none;
float:left;
width:82px;
padding:2px;
background:#ebebeb;
margin:0 6px 12px 0;
color:#505050;
position:relative;
clear:none;
}

.demos .demo{
position:relative;
float:left;
cursor:pointer;
border:1px solid #e1e1e1;
}
-->
</style>

</head>
<body>

<ul class="demos">
<li class='box'>
            <div class='wrapper'>
                <div class='demo' id='demo_click1' style='margin-right: 2px'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click1.gif' alt=''/></div>
                <div class='demo' id='demo_click2'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click2.gif' alt=''/></div>


            </div>

            <script type="text/javascript" language="javascript">
            new Tip('demo_click1', "Tooltips can be set to show on click.", {
                title: "Click",
                closeButton: true,
                showOn: 'click',
                hideOn: { element: 'closeButton', event: 'click'},
                stem: 'bottomMiddle',
                hook: { target: 'topMiddle', tip: 'bottomMiddle' },
                offset: { x: 0, y: -2 },
                width: 'auto'
            });

            new Tip('demo_click2', "Click the element again to close this tooltip.", {
                title: "Toggle",
                style: 'protoblue',
                showOn: 'click',
                hideOn: 'click',
                target: $('demo_click2').up('li'),
                stem: 'bottomLeft',
                hook: { target: 'topRight', tip: 'bottomLeft' },
                offset: { x: -6, y: 0 }
            });
            </script>
        </li></ul>

</body>
</html>

Wenn du mit dem CSS-Code nicht klarkommen solltest, melde dich einfach nochmal

mfg Maik

Bobgar · 8. Juni 2008

so klappt nun perfekt danke. der style den ich verwende ist default. jetzt hab ich ja son grauen border. Wie bekomme ich es hin, das ich ein bild als hintergrund verwende. (731x457) das ist die größe. der border soll weg sein. nur noch dieses bild quasi.

Maik · 8. Juni 2008

Hierfür gehst du in das Stylesheet prototip.css und nimmst für die Variante "default" die gewünschten Regeländerungen vor:

Code:

/* the default style */
.prototip .default {
        width: 731px;
        height: 457px;
        color: #808080;
        background:url(URI_zur_Grafik); /* Hintergrundbild definieren */
}
.prototip .default .toolbar {
        /*background: #f1f1f1;*/ /* Hintergrundfarbe deaktivieren */
        font-weight: bold;
}
.prototip .default .title { padding: 5px; }
.prototip .default .content {
        padding: 5px;
        /*background: #fff;*/ /* Hintergrundfarbe deaktivieren */
}

mfg Maik

Bobgar · 8. Juni 2008

danke für deine hilfe

Maik · 8. Juni 2008

Kein Ding, dafür bin ich schliesslich da

mfg Maik

✔ Tooltip

Bobgar

Grünschnabel

Maik

Bobgar

Grünschnabel

Maik

Bobgar

Grünschnabel

Maik

Bobgar

Grünschnabel

Maik

Neue Beiträge