Anpassungen für Bootstrap 5 Tooltips

Mit Ilch 2.2.0 wurde von Bootstrap 3 Popovers auf Bootstrap 5 Tooltips gewechselt.

Siehe: https://getbootstrap.com/docs/5.3/components/tooltips/

Die Bootstrap 5 Tooltips sind in Ilch global initialisiert.

Nötige Änderungen:

• data-toggle="event-popover" ändern in data-bs-toggle="tooltip".
• data-bs-custom-class="custom-tooltip" ergänzen, damit die von Ilch vorgegebenen CSS-Regeln angewendet werden.
• data-bs-title="<?=$this->getTrans('userLimitInfo') ?>", anstatt data-content="<?=$this->getTrans('userLimitInfo') ?>"
• title="<?=$this->getTrans('popoverInfo') ?>" entfernen.
• Code zur Initialisierung entfernen.

Vorher:

<div class="form-group <?=$this->validation()->hasError('userLimit') ? 'has-error' : '' ?>">
    <label for="userLimit" class="col-lg-2 control-label">
        <?=$this->getTrans('userLimit') ?> <div class="badge" data-toggle="event-popover" title="<?=$this->getTrans('popoverInfo') ?>" data-content="<?=$this->getTrans('userLimitInfo') ?>"><i class="fa-solid fa-info"></i></div>
    </label>
    <div class="col-lg-2">
        <input type="number"
               class="form-control"
               id="userLimit"
               name="userLimit"
               step="1"
               min="0"
               value="<?=($this->get('event') != '') ? $this->get('event')->getUserLimit() : $this->originalInput('userLimit') ?>" />
    </div>
</div>

[...]

<script>
$(function () {
    $('[data-toggle="event-popover"]').popover({
        container: 'body',
        trigger: 'hover'
    })
});
</script>

Nachher:

<div class="row mb-3<?=$this->validation()->hasError('userLimit') ? ' has-error' : '' ?>">
    <label for="userLimit" class="col-xl-2 col-form-label">
        <?=$this->getTrans('userLimit') ?> <div class="badge rounded-pill bg-secondary" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-title="<?=$this->getTrans('userLimitInfo') ?>"><i class="fa-solid fa-info"></i></div>
    </label>
    <div class="col-xl-2">
        <input type="number"
               class="form-control"
               id="userLimit"
               name="userLimit"
               step="1"
               min="0"
               value="<?=($this->get('event') != '') ? $this->get('event')->getUserLimit() : $this->originalInput('userLimit') ?>" />
    </div>
</div>

Je nach Bedarf können noch weitere Einstellungen über data-Attribute oder per JavaScript übergeben werden.

Wenn z.B. HTML im Tooltip ausgegeben werden soll, kann dies durch data-bs-html="true" erlaubt werden. Beachten Sie allerdings das Risiko von XSS Attacken.

Eine andere Einstellung wäre für die Platzierung des Tooltips. Hier kann z.B. data-bs-placement="bottom" angegeben werden,

Siehe: https://getbootstrap.com/docs/5.3/components/tooltips/#options