Kalender-Einträge mit Tooltips ausstatten

[coolflame]

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:

<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 ):

<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:

... 
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?

[magicsepp]

scheint ein zunehmender Funktionswunsch zu werden...

Ich hatte mir das gestern kurz mal hier angeschaut.
Es gibt noch ein Problem in der 3er Version ... das sind die Grafiken im Teaser mehr dazu...
Beim minicalender müsste es gehen wenn man die Events im cal_mini Template per for each abfrägt und sich daraus den Tooltipp erzeugt.


Muss das mal antesten....

[magicsepp]

als erstes passt die CSS Klasse nicht, die gehört zum a Tag und dann läßt sich das rel mit

rel="<?php echo $event['teaser'];?>"

befüllen. Der title wird dann als solches verwendet und der Teaser Text beschreibt das event per rel.

<?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:
KALENDAR.JPG

Viel Spaß

[coolflame]

vielen dank, hat funktioniert! sehr geil

[4lmnts]

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):

<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:

<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

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?

[4lmnts]

Habe mootools tooltip verworfen und tooltipster (https://iamceege.github.io/tooltipster/) eingesetzt. Funktionierte auf anhieb, auch mit dem Anpassen des Kalender-Templates "cal_default.html5".

Für diejenigen, die eine schnelle Lösung möchten:

Ich habe den ursprünglichen Event-Link im Kalender

<a href="<?= $event['href'] ?>" 
  title="<?= $event['title'] ?> (<?php if ($event['day']) echo $event['day'] . ', '; ?><?= $event['date'] ?><?php if ($event['time']) echo ', ' .  $event['time']; ?>)"
  <?= $event['target'] ?> 
  itemprop="url">
  <span itemprop="name">
    <?= $event['link'] ?>
  </span>
</a>

Mit diesem Link ersetzt:

<a class="tooltip" 
  title="<?php echo specialchars($event['teaser']);?>"
  <span itemprop="name">
    <?= $event['title'] ?><br><?= $event['time'] ?>
  </span>
</a>

Dadurch wird der Teaser eines Events zum Tooltip. Und mit

specialchars() 

funktioniert der Teaser auch mit darin enthaltenen Links.

Im Head fügte ich dann folgende Zeilen für Tooltipster ein, damit es für mouse-over und touch funktioniert:

<!-- jquery tooltipster -->
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<script>
        $(document).ready(function() {
            $('.tooltip').tooltipster({
            	animation: 'fade',
            	contentAsHTML: true,
            	interactive: true,
            	trigger: 'custom',
            	triggerOpen: {
            		mouseenter: true,
            		tap: true
            	},
            	triggerClose: {
            		mouseleave: true,
            		tap: true
            	}
            });
        });
    </script>

Tooltipster selbst liegt dementsprechend im Root (/web).

Resultat