Formularfelder in Contao mit einem Tooltip ergänzen
Du möchtest ein Contao-Element mit einem Tooltip ergänzen? Dann bis du hier richtig. Tooltips sind kleine Hinweise, die erscheinen, wenn du mit der Maus über einen Bereich, ein Info-Icon oder einen Button fährst. Sie eignen sich z.B. hervorragend, um zusätzliche Informationen zu einem Formular-Feld anzuzeigen, ohne dass das Formular zu stark überladen wird.
In diesem Beitrag zeige ich dir, wie du Tooltips ganz einfach in Contao Formularen hinzufügen kannst.
Was ist ein Tooltip in Contao?
Tooltips sind Hinweise, Glossarbegriffe oder Nachrichten, die erscheinen, wenn der Besucher mit der Maus über ein Element auf deiner Contao-Website fährt oder dieses (auf mobilen Geräten) berührt. In unserem speziellen Fall möchten wir den Tooltip in einem Contao Formular verwenden und mit dessen Hilfe zusätzliche Informationen zu bestimmten Feldern einblenden.
Wie das aussehen kann, siehst du hier:
Kann ich einen Tooltip ohne zusätzliche Erweiterung in Contao darstellen?
Ja das ist möglich, indem du deiner Contao Webseite ganz einfach weitere Eingabefelder hinzufügst.
1 | Ein neues Eingabefeld hinzufügen
In Contao 4.4
app/Resources/contao/dca/tl_form_field.php
In Contao 4.9
contao/dca/tl_form_field.php
Inhalt der Datei tl_form_field.php
<?php
$strTable = 'tl_form_field';
$GLOBALS['TL_DCA'][$strTable]['palettes']['text'] = str_replace(
',label',
',label,tooltip',
$GLOBALS['TL_DCA'][$strTable]['palettes']['text']
);
$GLOBALS['TL_DCA'][$strTable]['fields']['tooltip'] = [
'label' => &$GLOBALS['TL_LANG'][$strTable]['tooltip'],
'exclude' => true,
'sorting' => true,
'inputType' => 'textarea',
'eval' => ['rte'=>'tinyMCE', 'maxlength' => 255, 'tl_class' => 'w50'],
'sql' => "text NULL"
];2 | Eine Sprachdatei hinzufügen
In Contao 4.4
app/Resources/contao/languages/de/tl_form_field.php
In Contao 4.9
contao/languages/de/tl_form_field.php
<?php
$strTable = 'tl_form_field';
$GLOBALS['TL_LANG'][$strTable]['tooltip'] = ['Tooltip', 'Hier kannst du einen Tooltip für das Formularfeld angeben.'];3 | SCSS zum Layout hinzufügen
// Tooltips
$dark-color: #000;
$border-radius: 10px;
$light-color: #fff;
$font-size-sm: 14px;
$control-width-sm: 200px;
$unit-1: 5px;
$unit-2: 4px;
$zindex: 100;
$zindex-3: 101;
.tooltip {
position: relative;
&::after {
background: rgba($dark-color, .95);
border-radius: $border-radius;
bottom: 100%;
color: $light-color;
content: attr(data-tooltip);
display: block;
font-size: $font-size-sm;
left: 50%;
max-width: $control-width-sm;
opacity: 0;
overflow: hidden;
padding: $unit-1 $unit-2;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, $unit-2);
transition: opacity .2s, transform .2s;
white-space: pre;
z-index: $zindex-3;
}
&:focus,
&:hover {
&::after {
opacity: 1;
transform: translate(-50%, -$unit-1);
}
}
&[disabled],
&.disabled {
pointer-events: auto;
}
&.tooltip-right {
&::after {
bottom: 50%;
left: 100%;
transform: translate(-$unit-1, 50%);
}
&:focus,
&:hover {
&::after {
transform: translate($unit-1, 50%);
}
}
}
&.tooltip-bottom {
&::after {
bottom: auto;
top: 100%;
transform: translate(-50%, -$unit-2);
}
&:focus,
&:hover {
&::after {
transform: translate(-50%, $unit-1);
}
}
}
&.tooltip-left {
&::after {
bottom: 50%;
left: auto;
right: 100%;
transform: translate($unit-2, 50%);
}
&:focus,
&:hover {
&::after {
transform: translate(-$unit-1, 50%);
}
}
}
}4 | Template form_textfield_tooltip.html5 erstellen
<?php $this->extend('form_row'); ?>
<?php $this->block('label'); ?>
<?php if ($this->label): ?>
<label for="ctrl_<?= $this->id ?>"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?><?php if ($this->tooltip): ?> tooltip<?php endif; ?>"<?php if ($this->tooltip): ?> data-tooltip="<?= strip_tags($this->tooltip) ?>"<?php endif; ?>>
<?php if ($this->mandatory): ?>
<span class="invisible"><?= $this->mandatoryField ?> </span><?= $this->label ?><span class="mandatory">*</span>
<?php else: ?>
<?= $this->label ?>
<?php endif; ?>
</label>
<?php endif; ?>
<?php $this->endblock(); ?>
<?php $this->block('field'); ?>
<?php if ($this->hasErrors()): ?>
<p class="error"><?= $this->getErrorAsString() ?></p>
<?php endif; ?>
<input type="<?= $this->type ?>" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="col-4 text<?php if ($this->hideInput): ?> password<?php endif; ?><?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="<?= Contao\StringUtil::specialchars($this->value) ?>"<?= $this->getAttributes() ?>>
<?php $this->endblock(); ?>Wichtig ist hier vor allem folgender Code in Zeile 5.
if ($this->tooltip): tooltip endif; " if ($this->tooltip): data-tooltip="= strip_tags($this->tooltip) " endif;
<label for="ctrl_<?= $this->id ?>"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?><?php if ($this->tooltip): ?> tooltip<?php endif; ?>"<?php if ($this->tooltip): ?> data-tooltip="<?= strip_tags($this->tooltip) ?>"<?php endif; ?>>5 | Contao Cache leeren
Damit die Konfiguration wirksam wird, musst nun noch der Frontend Cache über den Contao Manager oder über die Kommandozeile geleert werden.
6 | Tooltip im Contao Backend eingeben
Nun kannst du deinen Tooltip ganz einfach im Formulargenerator von Contao eingeben und beim entsprechenden Feld das neue erstellte Template form_textfield_tooltip.html5 auswählen.
So kann der Tooltip nun aussehen
Sobald du dein Formular nun speicherst, es im Frontend aufrufst und mit der Maus über das entsprechende Formularfeld fährst, wird der Tooltip angezeigt.
HTML Code Beispiel
<div class="widget widget-text column col-6 col-sm-12 kaufpreis mandatory">
<label for="ctrl_35" class="column col-6 col-sm-12 kaufpreis mandatory bg-blue tooltip" data-tooltip="Hier den Kaufpreis ohne Nebenkosten eintragen.">
<span class="invisible">Pflichtfeld </span>Kaufpreis der Immobilie in €<span class="mandatory">*</span>
</label>
<input type="text" name="kaufpreis" id="ctrl_35" class="text column col-6 col-sm-12 kaufpreis mandatory" value="" required="" placeholder="0,00" data-cip-id="ctrl_35">
</div>Wo kann ich den Tooltip noch verwenden?
Der Tooltip kann natürlich auch bei anderen Contao Elementen eingesetzt werden. Du kannst zum Beispiel eigene Buttons erstellen oder auch Icons mit weiteren Hinweisen versehen.
Hier noch ein Code Beispiel für Buttons in Contao mit Tooltip.
Einfacher Button Tooltip
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>Mehrzeiliger Button Tooltip
<button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>Welche Positionen kann ich für den Tooltip nutzen?
Füge dem gewünschten Element die Klasse tooltip-right, tooltip-bottom oder tooltip-left hinzu, um die Position eines Tooltips zu definieren. Standardmäßig erscheint der Tooltip über dem Element.
Gibt es die Tooltips auch in einem Contao-Theme?
Ja, ab Version 1.1.0 unseres energiesparenden Premium Contao Themes sind Tooltips bereits standardmäßig integriert.
Wenn Dir dieser Artikel gefallen hat, dann wirst du pdir ❤! Erfahre mehr, wie du pdir unterstützen kannst oder schau dir unsere Produkte an, lass dir den pdir-Unterschied zeigen!
