Kalender-Einträge mit Tooltips ausstatten
hallo zusammen,
ich hatte mal wieder so eine bekloppte idee, die kalendereinträge (events) mit tooltips auszustatten, allerdings stellt sich mir da ein kleines problem in den weg.
ich habe mir nach dieser anleitung die tooltips-funktion eingebaut, ausserdem habe ich die cal_default.xhtml angepasst:
PHP-Code:
<table class="calendar">
<thead>
<tr>
<th colspan="2" class="head previous"><a href="<?php echo $this->prevHref; ?>" title="<?php echo $this->prevTitle; ?>"><?php echo $this->prevLink; ?></a></th>
<th colspan="3" class="head current"><?php echo $this->current; ?></th>
<th colspan="2" class="head next"><a href="<?php echo $this->nextHref; ?>" title="<?php echo $this->nextTitle; ?>"><?php echo $this->nextLink; ?></a></th>
</tr>
<tr>
<?php foreach ($this->days as $i=>$day): ?>
<th class="label<?php if ($i == 0) echo ' weekend col_first'; if ($i == 6) echo ' weekend col_last'; ?>"><?php echo $day; ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach ($this->weeks as $class=>$week): ?>
<tr class="<?php echo $class; ?>">
<?php foreach ($week as $day): ?>
<td class="<?php echo $day['class']; ?>">
<div class="header"><?php echo $day['label']; ?></div>
<?php foreach ($day['events'] as $event): ?>
<!--
<div class="event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>"><a href="<?php echo $event['href']; ?>" title="<?php echo $event['title']; ?> (<?php if ($event['day']): echo $event['day']; ?>, <?php endif; echo $event['date']; if ($event['time']): ?>, <?php echo $event['time']; endif; ?>)"<?php echo $event['target']; ?>><?php echo $event['link']; ?></a></div>
-->
<div class="tooltip event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>"><a href="<?php echo $event['href']; ?>" title="<?php echo $event['title']; ?>" rel="{{event_teaser::1}}"><?php echo $event['link']; ?></a></div>
<?php endforeach; ?>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
der geneigte leser wird feststellen, dass ich eine anpassung in diesem bereich gemacht habe, und der orignale teil auskommentiert ist (WIP-backup ;) ):
PHP-Code:
<td class="<?php echo $day['class']; ?>">
<div class="header"><?php echo $day['label']; ?></div>
<?php foreach ($day['events'] as $event): ?>
<!--
<div class="event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>"><a href="<?php echo $event['href']; ?>" title="<?php echo $event['title']; ?> (<?php if ($event['day']): echo $event['day']; ?>, <?php endif; echo $event['date']; if ($event['time']): ?>, <?php echo $event['time']; endif; ?>)"<?php echo $event['target']; ?>><?php echo $event['link']; ?></a></div>
-->
<div class="tooltip event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>"><a href="<?php echo $event['href']; ?>" title="<?php echo $event['title']; ?>" rel="{{event_teaser::1}}"><?php echo $event['link']; ?></a></div>
<?php endforeach; ?>
</td>
mein problem ist nun folgendes: es poppt zwar der tooltip auf (gibt's eigentlich irgendwo eine detailiertere dokumentation dazu?), allerdings zeigt er keinen inhalt, im quelltext ist jedoch sehr wohl der inhalt des eventteasers zu sehen. gleichzeitig steckt hier noch eine kleine schwierigkeit: wie kann ich das template so ändern, dass es mir automatisch den richtigen teaser zum jeweiligen event nimmt? hier habe ich ja einen festen wert eingetragen (rel="{{event_teaser::1}}"), aber das nur zu testzwecken.
ich dachte dabei an folgendes:
PHP-Code:
...
rel="{{event_teaser::<?php echo $event['parent']; ?>}}"
...
aber das kann ja so nicht funktionieren, $event['parent'] ist nicht das jeweilge event, ausserdem: php im smarty-tag ...
hat jemand 'ne lösung?
Liste der Anhänge anzeigen (Anzahl: 1)
als erstes passt die CSS Klasse nicht, die gehört zum a Tag und dann läßt sich das rel mit
PHP-Code:
rel="<?php echo $event['teaser'];?>"
befüllen. Der title wird dann als solches verwendet und der Teaser Text beschreibt das event per rel.
PHP-Code:
<?php foreach ($day['events'] as $event): ?>
<div class="event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>">
<a class="tooltip" href="<?php echo $event['href']; ?>" rel="<?php echo $event['teaser'];?>" title="<?php echo $event['title']; ?> (<?php if ($event['day']): echo $event['day']; ?>, <?php endif; echo $event['date']; if ($event['time']): ?>, <?php echo $event['time']; endif; ?>)" <?php echo $event['target']; ?>><?php echo $event['link']; ?></a></div>
<?php endforeach; ?>
siehe Beispiel:
Anhang 9241
Viel Spaß
moo_tooltip position default
Hallo zusammen
Ich greife dieses Thema nochmals auf. Die bisherigen posts in diesem Thema haben schon mal viel geholfen, danke!
Ich habe dieses mootools für tooltips als moo_tooltip.html5 in den templates eingefügt und im theme aktiviert (funktioniert übrigens nur, bei deaktiviertem jquery):
PHP-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
var myTips = new Tips($$('.tooltip'),
{
showDelay: 0, //Verzögerung bei MouseOver
hideDelay: 500, //Verzögerung bei MouseOut
className: 'tool', //CSS-Klassennamen --> CSS-Definitionen
offset: {'x': 0, 'y': 0 }, // Versatz des Tooltips
fixed: false, // 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>
Tooltip und Kalender funktionieren so weit so gut. Aber die Position des tooltips, das direkt im <body> am Ende eingefügt wird, sobald dieses Plugin und mootools aktiviert sind, ist von Anfang an definiert:
HTML-Code:
<div class="tool" style="position: absolute; top: 0px; left: 0px; display: none;">
Somit ist die Position des Tooltips immer oben links des Browserfensters.
Ich könnte zwar per CSS diesen style übersteuern, aber ich will eigentlich einfach die Standard-Position eines jeden Tooltips: und zwar gleich neben dem Link/Mauszeiger. Im Script ist ja auch
PHP-Code:
offset: {'x': 0, 'y': 0 }, // Versatz des Tooltips
fixed: false, // false = Tooltip bewegt sich mit dem Mauszeiger, true=Tooltip bewegt sich nicht
definiert.
Aber seht selbst:
Kalender mit Tooltip
Habe auch schon im mootools-core-script nachgeschaut, ob da was wäre....
vendor/contao/core-bundle/src/Resources/public/mootao.js
Hat jemand eine Idee, was da los sein könnte?