From d82ed4d82a5ccdd5a939a7d625ecaf7e8dd0565a Mon Sep 17 00:00:00 2001 From: Anna Dabrowska Date: Mon, 28 Oct 2019 13:52:57 +0100 Subject: [PATCH 01/32] Update docs --- doc/app.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/app.md b/doc/app.md index 4bf1c6e..7da3a29 100644 --- a/doc/app.md +++ b/doc/app.md @@ -2,5 +2,6 @@ All settings and message strings are defined in `conf/` -You can override them by copying `*.default.yaml` to `*.local.yaml` and adjusting the values. +You can override the defaults by copying `settings.default.yaml` and/or `language.default.yaml` to `*.local.yaml` and adjusting the values. +**Note:** as there is no translation mechanism yet, the provided German language file `language-de.default.yaml` is just an example and needs to be copied manually to `language.local.yaml`, as described above. From c62765e933d469b140f52772dc7c0405146b2cf3 Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 11:23:00 +0100 Subject: [PATCH 02/32] YAD-15 Refactor file extension getting to FileHelper::getFileExtension() --- src/Actions/DownloadAction.php | 8 ++--- src/FormGenerator/Form.php | 8 ++--- src/Helper/FileHelper.php | 55 ++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 11 deletions(-) create mode 100644 src/Helper/FileHelper.php diff --git a/src/Actions/DownloadAction.php b/src/Actions/DownloadAction.php index 2d5d3d1..cf8f41d 100644 --- a/src/Actions/DownloadAction.php +++ b/src/Actions/DownloadAction.php @@ -2,6 +2,7 @@ namespace CosmoCode\Formserver\Actions; +use CosmoCode\Formserver\Helper\FileHelper; use DI\NotFoundException; use Mimey\MimeTypes; use Psr\Http\Message\ResponseInterface as Response; @@ -37,12 +38,7 @@ protected function action(): Response } $mimes = new MimeTypes(); - $extension = strtolower( - pathinfo( - $filePath, - PATHINFO_EXTENSION - ) - ); + $extension = FileHelper::getFileExtension($filePath); $mimeType = $mimes->getMimeType($extension); $file = fopen($filePath, 'rb'); diff --git a/src/FormGenerator/Form.php b/src/FormGenerator/Form.php index 3f52510..dfb1a27 100644 --- a/src/FormGenerator/Form.php +++ b/src/FormGenerator/Form.php @@ -8,6 +8,7 @@ use CosmoCode\Formserver\FormGenerator\FormElements\ChecklistFormElement; use CosmoCode\Formserver\FormGenerator\FormElements\FieldsetFormElement; use CosmoCode\Formserver\FormGenerator\FormElements\UploadFormElement; +use CosmoCode\Formserver\Helper\FileHelper; use CosmoCode\Formserver\Helper\YamlHelper; use Slim\Psr7\UploadedFile; @@ -281,11 +282,8 @@ protected function moveUploadedFile( UploadedFile $uploadedFile, UploadFormElement $formElement ) { - $extension = strtolower( - pathinfo( - $uploadedFile->getClientFilename(), - PATHINFO_EXTENSION - ) + $extension = FileHelper::getFileExtension( + $uploadedFile->getClientFilename() ); $baseName = $formElement->getId(); diff --git a/src/Helper/FileHelper.php b/src/Helper/FileHelper.php new file mode 100644 index 0000000..c1bc27a --- /dev/null +++ b/src/Helper/FileHelper.php @@ -0,0 +1,55 @@ + Date: Tue, 10 Dec 2019 11:41:03 +0100 Subject: [PATCH 03/32] YAD-15 Move defined file on form send --- .gitignore | 4 ++ app/dependencies.php | 10 +++++ conf/settings.default.yaml | 2 + data/EXAMPLE/config.yaml | 2 + data/EXAMPLE/i_will_be_moved.txt | 1 + src/Actions/FormAction.php | 30 +++++++++++++- src/Service/FileExporter.php | 67 ++++++++++++++++++++++++++++++++ 7 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 data/EXAMPLE/i_will_be_moved.txt create mode 100644 src/Service/FileExporter.php diff --git a/.gitignore b/.gitignore index 8a6e2ab..6dbb891 100644 --- a/.gitignore +++ b/.gitignore @@ -9,9 +9,13 @@ vendor data/* !data/EXAMPLE/config.yaml !data/EXAMPLE/logo.png +!data/EXAMPLE/i_will_be_moved.txt # logs /logs # local conf /conf/*.local.yaml + +# export directory +/export \ No newline at end of file diff --git a/app/dependencies.php b/app/dependencies.php index 7c03fd0..0f46345 100644 --- a/app/dependencies.php +++ b/app/dependencies.php @@ -1,6 +1,7 @@ addDefinitions([ + FileExporter::class => function (ContainerInterface $c) { + $settings = $c->get('settings'); + $mailSettings = $settings['fileExporter'] ?? []; + + return new FileExporter($mailSettings); + } + ]); }; diff --git a/conf/settings.default.yaml b/conf/settings.default.yaml index 42b078a..037c4d6 100644 --- a/conf/settings.default.yaml +++ b/conf/settings.default.yaml @@ -7,3 +7,5 @@ settings: encryption: ~ username: ~ password: ~ + fileExporter: + dir: export \ No newline at end of file diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml index 3d89456..a375283 100644 --- a/data/EXAMPLE/config.yaml +++ b/data/EXAMPLE/config.yaml @@ -9,6 +9,8 @@ meta: - recipient2@example.com cc: - fieldset0.fieldset_dynamic.email1 + fileExporter: + file: i_will_be_moved.txt form: fieldset0: type: fieldset diff --git a/data/EXAMPLE/i_will_be_moved.txt b/data/EXAMPLE/i_will_be_moved.txt new file mode 100644 index 0000000..8670833 --- /dev/null +++ b/data/EXAMPLE/i_will_be_moved.txt @@ -0,0 +1 @@ +With the default configuration i will be moved to 'export/' \ No newline at end of file diff --git a/src/Actions/FormAction.php b/src/Actions/FormAction.php index 86db24b..672bca1 100644 --- a/src/Actions/FormAction.php +++ b/src/Actions/FormAction.php @@ -3,10 +3,12 @@ namespace CosmoCode\Formserver\Actions; +use CosmoCode\Formserver\Exceptions\FormException; use CosmoCode\Formserver\Exceptions\MailException; use CosmoCode\Formserver\FormGenerator\Form; use CosmoCode\Formserver\FormGenerator\FormRenderer; use CosmoCode\Formserver\FormGenerator\FormValidator; +use CosmoCode\Formserver\Service\FileExporter; use CosmoCode\Formserver\Service\LangManager; use CosmoCode\Formserver\Service\Mailer; use Psr\Http\Message\ResponseInterface as Response; @@ -24,14 +26,21 @@ class FormAction extends AbstractAction */ protected $mailer; + /** + * @var FileExporter + */ + protected $fileExporter; + /** * Constructor to inject dependencies * * @param Mailer $mailer + * @param FileExporter $fileExporter */ - public function __construct(Mailer $mailer) + public function __construct(Mailer $mailer, FileExporter $fileExporter) { $this->mailer = $mailer; + $this->fileExporter = $fileExporter; } /** @@ -58,6 +67,7 @@ protected function action(): Response if ($form->isValid() && $form->getMode() === Form::MODE_SEND) { $this->mailer->sendForm($form); + $this->handleFileExport($form); } } elseif ($this->request->getMethod() === 'GET') { $form->restore(); @@ -73,4 +83,22 @@ protected function action(): Response return $this->response; } + + /** + * Helper function to copy file to another location when form gets sent + * + * @param Form $form + * @return void + * @throws FormException + */ + protected function handleFileExport(Form $form) + { + $file = $form->getMeta('fileExporter')['file'] ?? ''; + if ($file !== '') { + $formId = $form->getId(); + $filePath = $form->getFormDirectory() . $file; + + $this->fileExporter->moveFile($filePath, $formId); + } + } } diff --git a/src/Service/FileExporter.php b/src/Service/FileExporter.php new file mode 100644 index 0000000..95a48b6 --- /dev/null +++ b/src/Service/FileExporter.php @@ -0,0 +1,67 @@ +exportDir = FileHelper::sanitizeDirectoryPath( + self::ROOT_DIR . $exportConfiguration['dir'] ?? '' + ); + } + + /** + * Move a file to configured export dir with $newFilename + * + * @param string $filePath + * @param string $newFilename + * @return void + * @throws \RuntimeException + */ + public function moveFile(string $filePath, string $newFilename) + { + + if (! is_file($filePath)) { + throw new FormException( + "Could not move file '$filePath'. File does not exist" + ); + } + + if (! mkdir($this->exportDir, 0755, true) && ! is_dir($this->exportDir)) { + throw new FormException( + 'Could not create export directory ' . $this->exportDir + ); + } + + $fileExtension = FileHelper::getFileExtension($filePath); + + copy($filePath, $this->exportDir . $newFilename . '.' . $fileExtension); + } +} From 6514a9795b08e33c3306de26701edfb6d3950921 Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 11:47:32 +0100 Subject: [PATCH 04/32] YAD-17 Add configuration to toggle save button visibility --- data/EXAMPLE/config.yaml | 1 + src/FormGenerator/FormRenderer.php | 3 ++- view/_form.twig | 12 +++++++----- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml index a375283..95ee4bb 100644 --- a/data/EXAMPLE/config.yaml +++ b/data/EXAMPLE/config.yaml @@ -11,6 +11,7 @@ meta: - fieldset0.fieldset_dynamic.email1 fileExporter: file: i_will_be_moved.txt + saveButton: false form: fieldset0: type: fieldset diff --git a/src/FormGenerator/FormRenderer.php b/src/FormGenerator/FormRenderer.php index 30dca24..45323b0 100644 --- a/src/FormGenerator/FormRenderer.php +++ b/src/FormGenerator/FormRenderer.php @@ -97,7 +97,8 @@ public function render() 'notification' => $this->generateNotification(), 'css' => $this->form->getMeta('css'), 'form_id' => $this->form->getId(), - 'logo' => $this->form->getMeta('logo') + 'logo' => $this->form->getMeta('logo'), + 'save_button_visible' => $this->form->getMeta('saveButton') ?? true ] ); } diff --git a/view/_form.twig b/view/_form.twig index c999fea..bbe7159 100644 --- a/view/_form.twig +++ b/view/_form.twig @@ -39,11 +39,13 @@
-
- -
+ {% if save_button_visible %} +
+ +
+ {% endif %}
From 001c79839f3ce9d0f305c6836ece849e71417b0a Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 13:09:05 +0100 Subject: [PATCH 06/32] YAD-20 Show info text after file was selected for upload --- conf/language-de.default.yaml | 1 + conf/language.default.yaml | 1 + public/js/app.js | 9 +++++++++ src/FormGenerator/FormRenderer.php | 2 ++ view/upload.twig | 9 ++++++++- 5 files changed, 21 insertions(+), 1 deletion(-) diff --git a/conf/language-de.default.yaml b/conf/language-de.default.yaml index e526642..5a6bd64 100644 --- a/conf/language-de.default.yaml +++ b/conf/language-de.default.yaml @@ -18,3 +18,4 @@ button_send : Senden button_upload: Datei hochladen button_upload_replace: Datei ersetzen uploaded_file: Hochgeladene Dateien +upload_info: Die ausgewählte Datei wird beim Speichern oder Senden hochgeladen und geprüft \ No newline at end of file diff --git a/conf/language.default.yaml b/conf/language.default.yaml index 8a8fa1d..74fdda8 100644 --- a/conf/language.default.yaml +++ b/conf/language.default.yaml @@ -18,3 +18,4 @@ button_send : Send button_upload: Upload file button_upload_replace: Replace uploaded file uploaded_file: Saved file +upload_info: The selected file will be uploaded and checked after saving or sending the form \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index 85157db..005dcde 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -94,6 +94,15 @@ Array.from(fieldsetsWithToggle).forEach(function(fieldset) { }); +// Init upload feedback text +Array.from(document.querySelectorAll('.form-input.file-input')).forEach(function(fileUpload) { + fileUpload.addEventListener('input', function (e) { + infoContainerId = e.target.getAttribute('data-info-container-id'); + infoContainer = document.getElementById(infoContainerId); + infoContainer.classList.remove('hidden'); + }) +}); + // Helper function to enable or disable a fieldset function toggleFieldset(fieldset, formInput) { var toggleValue = fieldset.getAttribute('data-toggle-value'); diff --git a/src/FormGenerator/FormRenderer.php b/src/FormGenerator/FormRenderer.php index 45323b0..7af3218 100644 --- a/src/FormGenerator/FormRenderer.php +++ b/src/FormGenerator/FormRenderer.php @@ -66,6 +66,7 @@ public function render() $uploadButtonLabel = LangManager::getString('button_upload'); $replaceUploadButtonLabel = LangManager::getString('button_upload_replace'); $uploadedFileLabel = LangManager::getString('uploaded_file'); + $uploadInfo = LangManager::getString('upload_info'); // Global variables available in all templates and macros $this->twig->addGlobal('form_id', $this->form->getId()); @@ -75,6 +76,7 @@ public function render() $this->twig->addGlobal('button_upload_label', $uploadButtonLabel); $this->twig->addGlobal('button_upload_replace', $replaceUploadButtonLabel); $this->twig->addGlobal('uploaded_file_label', $uploadedFileLabel); + $this->twig->addGlobal('upload_info', $uploadInfo); foreach ($this->form->getFormElements() as $formElement) { if ($formElement instanceof FieldsetFormElement) { diff --git a/view/upload.twig b/view/upload.twig index 9006085..d9b6f4c 100644 --- a/view/upload.twig +++ b/view/upload.twig @@ -7,13 +7,20 @@ {{ uploaded_file_label is not empty ? uploaded_file_label : 'Saved file' }}
{% endif %} + + + {{ renderError(errors) }}
From 7b53f1783b152cf3a5d9bf0b57093b9406c9dc81 Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 13:09:36 +0100 Subject: [PATCH 07/32] YAD-17 Show save button in example form --- data/EXAMPLE/config.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml index bfc2bd1..9a60c2b 100644 --- a/data/EXAMPLE/config.yaml +++ b/data/EXAMPLE/config.yaml @@ -11,7 +11,7 @@ meta: - fieldset0.fieldset_dynamic.email1 fileExporter: file: i_will_be_moved.txt - saveButton: false + saveButton: true form: fieldset0: type: fieldset From 51e2609d49e7ac083ec8ea25b3729f7929b146a2 Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 13:11:39 +0100 Subject: [PATCH 08/32] Cleanup indentation --- view/upload.twig | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/view/upload.twig b/view/upload.twig index d9b6f4c..38c63a6 100644 --- a/view/upload.twig +++ b/view/upload.twig @@ -13,10 +13,10 @@ {{ allowed_extensions is defined ? ('accept=".'~allowed_extensions|join(',.')~'"')|raw }} data-info-container-id="{{ id }}-upload-info" /> - - {{ is_uploaded ? button_upload_replace : button_upload_label }} - + + {{ is_uploaded ? button_upload_replace : button_upload_label }} + From 967a681dce0b45c83f26b6c15d6bc2c36b60b7fd Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 14:30:03 +0100 Subject: [PATCH 09/32] YAD-21 Enable markdown in checkboxlist labels (breaking change) --- data/EXAMPLE/config.yaml | 6 ++-- .../FormElements/ChecklistFormElement.php | 32 +++++++++++++++++++ view/checklist.twig | 8 ++--- 3 files changed, 39 insertions(+), 7 deletions(-) diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml index 9a60c2b..d90360d 100644 --- a/data/EXAMPLE/config.yaml +++ b/data/EXAMPLE/config.yaml @@ -110,9 +110,9 @@ form: alignment: vertical label: 'Checklist' choices: - - 'Choice #1' - - 'Choice #2' - - 'Choice #3' + choice 0: 'Choice #1' + choice 1: 'Choice #2 [a nice link](https://www.cosmocode.de)' + choice 2: 'Choice #3' upload1: type: upload label: 'Upload' diff --git a/src/FormGenerator/FormElements/ChecklistFormElement.php b/src/FormGenerator/FormElements/ChecklistFormElement.php index e5b17c6..26625bf 100644 --- a/src/FormGenerator/FormElements/ChecklistFormElement.php +++ b/src/FormGenerator/FormElements/ChecklistFormElement.php @@ -2,10 +2,42 @@ namespace CosmoCode\Formserver\FormGenerator\FormElements; +use Michelf\MarkdownExtra; + /** * Representation of a checkbox group */ class ChecklistFormElement extends AbstractDynamicFormElement { + /** + * Override parent to transform markdown choice labels + * + * @return array + */ + public function getViewVariables() + { + $choices = $this->getConfigValue('choices'); + $transformedChoices = []; + + foreach ($choices as $choiceValue => $choiceLabel) { + $transformedChoiceLabel = MarkdownExtra::defaultTransform($choiceLabel); + + // Markdown lib always wraps the content in a

...

+ // https://github.com/michelf/php-markdown/issues/230 + $transformedChoiceLabel = str_replace( + ['

', '

'], + '', + $transformedChoiceLabel + ); + + $transformedChoices[$transformedChoiceLabel] = $choiceValue; + }; + return array_merge( + parent::getViewVariables(), + [ + 'choices' => $transformedChoices + ] + ); + } } diff --git a/view/checklist.twig b/view/checklist.twig index a8aba48..3b547ba 100644 --- a/view/checklist.twig +++ b/view/checklist.twig @@ -4,16 +4,16 @@
{{ label }} {{ is_required ? '*' }}
- {%- for choice in choices -%} + {%- for choice_label, choice_value in choices -%} {%- if alignment is defined and alignment == 'vertical' -%}
From 25195cb31af32da6d59a4e0d6adf8d32de88e2cb Mon Sep 17 00:00:00 2001 From: Carl Aischmann Date: Tue, 10 Dec 2019 16:18:53 +0100 Subject: [PATCH 10/32] YAD-21 Add tooltips --- data/EXAMPLE/config.yaml | 1 + public/css/app.css | 11 ++++++++++- public/css/bulma-tooltip.min.css | 1 + .../FormElements/AbstractDynamicFormElement.php | 17 ++++++++++++++++- view/_form.twig | 1 + view/_macros.twig | 6 ++++++ view/checklist.twig | 3 ++- view/date.twig | 3 ++- view/datetime.twig | 3 ++- view/dropdown.twig | 3 ++- view/email.twig | 3 ++- view/numberinput.twig | 3 ++- view/radioset.twig | 3 ++- view/textarea.twig | 3 ++- view/textinput.twig | 3 ++- view/time.twig | 3 ++- view/upload.twig | 4 +++- 17 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 public/css/bulma-tooltip.min.css diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml index d90360d..32208e7 100644 --- a/data/EXAMPLE/config.yaml +++ b/data/EXAMPLE/config.yaml @@ -70,6 +70,7 @@ form: validation: match: /[a-zA-Z0-9]/ required: false + tooltip: 'Optional input\nAllowed characters: a-Z, 0-9' numberinput1: type: numberinput label: Numberinput diff --git a/public/css/app.css b/public/css/app.css index b204f0d..be1d7da 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -28,4 +28,13 @@ canvas { fieldset { display: contents; -} \ No newline at end of file +} + +.label { + display: inline-block; +} + +.tooltip-button { + border: 0; + +} diff --git a/public/css/bulma-tooltip.min.css b/public/css/bulma-tooltip.min.css new file mode 100644 index 0000000..421c678 --- /dev/null +++ b/public/css/bulma-tooltip.min.css @@ -0,0 +1 @@ +@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}[data-tooltip]:not(.is-disabled),[data-tooltip]:not(.is-loading),[data-tooltip]:not([disabled]){cursor:pointer;overflow:visible;position:relative}[data-tooltip]:not(.is-disabled)::after,[data-tooltip]:not(.is-disabled)::before,[data-tooltip]:not(.is-loading)::after,[data-tooltip]:not(.is-loading)::before,[data-tooltip]:not([disabled])::after,[data-tooltip]:not([disabled])::before{box-sizing:border-box;color:#fff;display:inline-block;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.75rem;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;visibility:hidden;z-index:1020}[data-tooltip]:not(.is-disabled)::after,[data-tooltip]:not(.is-loading)::after,[data-tooltip]:not([disabled])::after{content:'';border-style:solid;border-width:6px;border-color:rgba(74,74,74,.9) transparent transparent transparent;margin-bottom:-5px}[data-tooltip]:not(.is-disabled)::after,[data-tooltip]:not(.is-loading)::after,[data-tooltip]:not([disabled])::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled)::before,[data-tooltip]:not(.is-loading)::before,[data-tooltip]:not([disabled])::before{background:rgba(74,74,74,.9);border-radius:2px;content:attr(data-tooltip);padding:.5rem 1rem;text-overflow:ellipsis;white-space:pre}[data-tooltip]:not(.is-disabled)::before,[data-tooltip]:not(.is-loading)::before,[data-tooltip]:not([disabled])::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}[data-tooltip]:not(.is-disabled).has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-bottom::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before,[data-tooltip]:not(.is-loading).has-tooltip-bottom::before,[data-tooltip]:not([disabled]).has-tooltip-bottom::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}[data-tooltip]:not(.is-disabled).has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-left::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-left::before,[data-tooltip]:not(.is-loading).has-tooltip-left::before,[data-tooltip]:not([disabled]).has-tooltip-left::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}[data-tooltip]:not(.is-disabled).has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-right::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-right::before,[data-tooltip]:not(.is-loading).has-tooltip-right::before,[data-tooltip]:not([disabled]).has-tooltip-right::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}[data-tooltip]:not(.is-disabled).has-tooltip-multiline::before,[data-tooltip]:not(.is-loading).has-tooltip-multiline::before,[data-tooltip]:not([disabled]).has-tooltip-multiline::before{height:auto;width:15rem;max-width:15rem;text-overflow:clip;white-space:normal;word-break:keep-all}[data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-bottom::after{border-color:transparent transparent rgba(255,255,255,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-left::after{border-color:transparent transparent transparent rgba(255,255,255,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-right::after{border-color:transparent rgba(255,255,255,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-white:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-white:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-white:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-white:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-white:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-white:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-white:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-white:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-white:not(.has-tooltip-right)::after{border-color:rgba(255,255,255,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-white:before,[data-tooltip]:not(.is-loading).has-tooltip-white:before,[data-tooltip]:not([disabled]).has-tooltip-white:before{background-color:rgba(255,255,255,.9);color:#0a0a0a}[data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-bottom::after{border-color:transparent transparent rgba(10,10,10,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-left::after{border-color:transparent transparent transparent rgba(10,10,10,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-right::after{border-color:transparent rgba(10,10,10,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-black:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-black:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-black:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-black:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-black:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-black:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-black:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-black:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-black:not(.has-tooltip-right)::after{border-color:rgba(10,10,10,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-black:before,[data-tooltip]:not(.is-loading).has-tooltip-black:before,[data-tooltip]:not([disabled]).has-tooltip-black:before{background-color:rgba(10,10,10,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-bottom::after{border-color:transparent transparent rgba(245,245,245,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-left::after{border-color:transparent transparent transparent rgba(245,245,245,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-right::after{border-color:transparent rgba(245,245,245,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-light:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-light:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-light:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-light:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-light:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-light:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-light:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-light:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-light:not(.has-tooltip-right)::after{border-color:rgba(245,245,245,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-light:before,[data-tooltip]:not(.is-loading).has-tooltip-light:before,[data-tooltip]:not([disabled]).has-tooltip-light:before{background-color:rgba(245,245,245,.9);color:#363636}[data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-bottom::after{border-color:transparent transparent rgba(54,54,54,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-left::after{border-color:transparent transparent transparent rgba(54,54,54,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-right::after{border-color:transparent rgba(54,54,54,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-dark:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-dark:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-dark:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-dark:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-dark:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-dark:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-dark:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-dark:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-dark:not(.has-tooltip-right)::after{border-color:rgba(54,54,54,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-dark:before,[data-tooltip]:not(.is-loading).has-tooltip-dark:before,[data-tooltip]:not([disabled]).has-tooltip-dark:before{background-color:rgba(54,54,54,.9);color:#f5f5f5}[data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-bottom::after{border-color:transparent transparent rgba(0,209,178,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-left::after{border-color:transparent transparent transparent rgba(0,209,178,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-right::after{border-color:transparent rgba(0,209,178,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-primary:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-primary:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-primary:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-primary:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-primary:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-primary:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-primary:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-primary:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-primary:not(.has-tooltip-right)::after{border-color:rgba(0,209,178,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-primary:before,[data-tooltip]:not(.is-loading).has-tooltip-primary:before,[data-tooltip]:not([disabled]).has-tooltip-primary:before{background-color:rgba(0,209,178,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-bottom::after{border-color:transparent transparent rgba(50,115,220,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-left::after{border-color:transparent transparent transparent rgba(50,115,220,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-right::after{border-color:transparent rgba(50,115,220,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-link:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-link:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-link:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-link:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-link:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-link:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-link:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-link:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-link:not(.has-tooltip-right)::after{border-color:rgba(50,115,220,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-link:before,[data-tooltip]:not(.is-loading).has-tooltip-link:before,[data-tooltip]:not([disabled]).has-tooltip-link:before{background-color:rgba(50,115,220,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-bottom::after{border-color:transparent transparent rgba(32,156,238,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-left::after{border-color:transparent transparent transparent rgba(32,156,238,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-right::after{border-color:transparent rgba(32,156,238,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-info:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-info:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-info:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-info:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-info:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-info:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-info:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-info:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-info:not(.has-tooltip-right)::after{border-color:rgba(32,156,238,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-info:before,[data-tooltip]:not(.is-loading).has-tooltip-info:before,[data-tooltip]:not([disabled]).has-tooltip-info:before{background-color:rgba(32,156,238,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-bottom::after{border-color:transparent transparent rgba(35,209,96,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-left::after{border-color:transparent transparent transparent rgba(35,209,96,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-right::after{border-color:transparent rgba(35,209,96,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-success:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-success:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-success:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-success:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-success:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-success:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-success:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-success:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-success:not(.has-tooltip-right)::after{border-color:rgba(35,209,96,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-success:before,[data-tooltip]:not(.is-loading).has-tooltip-success:before,[data-tooltip]:not([disabled]).has-tooltip-success:before{background-color:rgba(35,209,96,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-bottom::after{border-color:transparent transparent rgba(255,221,87,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-left::after{border-color:transparent transparent transparent rgba(255,221,87,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-right::after{border-color:transparent rgba(255,221,87,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-warning:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-warning:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-warning:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-warning:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-warning:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-warning:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-warning:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-warning:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-warning:not(.has-tooltip-right)::after{border-color:rgba(255,221,87,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-warning:before,[data-tooltip]:not(.is-loading).has-tooltip-warning:before,[data-tooltip]:not([disabled]).has-tooltip-warning:before{background-color:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}[data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-bottom::after{border-color:transparent transparent rgba(255,56,96,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-left::after{border-color:transparent transparent transparent rgba(255,56,96,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-right::after{border-color:transparent rgba(255,56,96,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-danger:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-danger:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-danger:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-danger:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-danger:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-danger:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-danger:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-danger:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-danger:not(.has-tooltip-right)::after{border-color:rgba(255,56,96,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-danger:before,[data-tooltip]:not(.is-loading).has-tooltip-danger:before,[data-tooltip]:not([disabled]).has-tooltip-danger:before{background-color:rgba(255,56,96,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-active::after,[data-tooltip]:not(.is-disabled).has-tooltip-active::before,[data-tooltip]:not(.is-disabled):focus::after,[data-tooltip]:not(.is-disabled):focus::before,[data-tooltip]:not(.is-disabled):hover::after,[data-tooltip]:not(.is-disabled):hover::before,[data-tooltip]:not(.is-loading).has-tooltip-active::after,[data-tooltip]:not(.is-loading).has-tooltip-active::before,[data-tooltip]:not(.is-loading):focus::after,[data-tooltip]:not(.is-loading):focus::before,[data-tooltip]:not(.is-loading):hover::after,[data-tooltip]:not(.is-loading):hover::before,[data-tooltip]:not([disabled]).has-tooltip-active::after,[data-tooltip]:not([disabled]).has-tooltip-active::before,[data-tooltip]:not([disabled]):focus::after,[data-tooltip]:not([disabled]):focus::before,[data-tooltip]:not([disabled]):hover::after,[data-tooltip]:not([disabled]):hover::before{opacity:1;visibility:visible}[data-tooltip]:not(.is-disabled).has-tooltip-fade::after,[data-tooltip]:not(.is-disabled).has-tooltip-fade::before,[data-tooltip]:not(.is-loading).has-tooltip-fade::after,[data-tooltip]:not(.is-loading).has-tooltip-fade::before,[data-tooltip]:not([disabled]).has-tooltip-fade::after,[data-tooltip]:not([disabled]).has-tooltip-fade::before{transition:opacity .3s linear,visibility .3s linear}@media screen and (max-width:768px){.has-tooltip-top-mobile::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-mobile::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:769px),print{.has-tooltip-top-tablet::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-tablet::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-top-tablet-only::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-tablet-only::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:1087px){.has-tooltip-top-touch::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-touch::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1088px){.has-tooltip-top-desktop::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-desktop::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-top-desktop-only::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-desktop-only::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:1279px){.has-tooltip-top-until-widescreen::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-until-widescreen::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1280px){.has-tooltip-top-widescreen::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-widescreen::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-top-widescreen-only::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-widescreen-only::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:1471px){.has-tooltip-top-until-fullhd::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-until-fullhd::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1472px){.has-tooltip-top-fullhd::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-fullhd::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:768px){.has-tooltip-right-mobile::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-mobile::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:769px),print{.has-tooltip-right-tablet::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-tablet::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-right-tablet-only::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-tablet-only::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:1087px){.has-tooltip-right-touch::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-touch::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1088px){.has-tooltip-right-desktop::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-desktop::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-right-desktop-only::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-desktop-only::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:1279px){.has-tooltip-right-until-widescreen::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-until-widescreen::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1280px){.has-tooltip-right-widescreen::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-widescreen::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-right-widescreen-only::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-widescreen-only::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:1471px){.has-tooltip-right-until-fullhd::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-until-fullhd::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1472px){.has-tooltip-right-fullhd::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-fullhd::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:768px){.has-tooltip-bottom-mobile::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-mobile::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:769px),print{.has-tooltip-bottom-tablet::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-tablet::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-bottom-tablet-only::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-tablet-only::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:1087px){.has-tooltip-bottom-touch::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-touch::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1088px){.has-tooltip-bottom-desktop::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-desktop::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-bottom-desktop-only::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-desktop-only::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:1279px){.has-tooltip-bottom-until-widescreen::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-until-widescreen::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1280px){.has-tooltip-bottom-widescreen::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-widescreen::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-bottom-widescreen-only::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-widescreen-only::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:1471px){.has-tooltip-bottom-until-fullhd::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-until-fullhd::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1472px){.has-tooltip-bottom-fullhd::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-fullhd::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:768px){.has-tooltip-left-mobile::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-mobile::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:769px),print{.has-tooltip-left-tablet::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-tablet::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-left-tablet-only::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-tablet-only::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (max-width:1087px){.has-tooltip-left-touch::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-touch::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1088px){.has-tooltip-left-desktop::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-desktop::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-left-desktop-only::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-desktop-only::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (max-width:1279px){.has-tooltip-left-until-widescreen::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-until-widescreen::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1280px){.has-tooltip-left-widescreen::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-widescreen::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-left-widescreen-only::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-widescreen-only::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (max-width:1471px){.has-tooltip-left-until-fullhd::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-until-fullhd::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1472px){.has-tooltip-left-fullhd::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-fullhd::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}} diff --git a/src/FormGenerator/FormElements/AbstractDynamicFormElement.php b/src/FormGenerator/FormElements/AbstractDynamicFormElement.php index ab86da4..dab1b49 100644 --- a/src/FormGenerator/FormElements/AbstractDynamicFormElement.php +++ b/src/FormGenerator/FormElements/AbstractDynamicFormElement.php @@ -141,8 +141,23 @@ public function getViewVariables() 'id_string' => $this->getFormElementIdStringified(), 'value' => $this->getValue(), 'errors' => $this->getErrors(), - 'is_required' => $this->isRequired() + 'is_required' => $this->isRequired(), + 'tooltip' => $this->parseTooltip() ] ); } + + /** + * Parses tooltip. + * Transform newlines (\n) to NCR representation. + * If no tooltip given return empty string. + * + * @return string + */ + protected function parseTooltip() + { + $tooltip = $this->getConfigValue('tooltip') ?? ''; + + return str_replace("\n", ' ', $tooltip); + } } diff --git a/view/_form.twig b/view/_form.twig index bbe7159..7843690 100644 --- a/view/_form.twig +++ b/view/_form.twig @@ -6,6 +6,7 @@ {{ title is defined ? title : 'Form'}} + {%- if css is not empty -%} diff --git a/view/_macros.twig b/view/_macros.twig index be3d409..1fbf77a 100644 --- a/view/_macros.twig +++ b/view/_macros.twig @@ -24,4 +24,10 @@ {{ notification }}
{%- endif -%} +{%- endmacro -%} + +{%- macro renderTooltip(tooltip) -%} + {%- if tooltip is not empty -%} + + {%- endif -%} {%- endmacro -%} \ No newline at end of file diff --git a/view/checklist.twig b/view/checklist.twig index 3b547ba..063e4fd 100644 --- a/view/checklist.twig +++ b/view/checklist.twig @@ -1,8 +1,9 @@ -{% from '_macros' import renderError %} +{% from '_macros' import renderError, renderTooltip %}
{{ label }} {{ is_required ? '*' }}
+ {{ renderTooltip(tooltip) }}
{%- for choice_label, choice_value in choices -%}