From a752d079115b4ed284fc6d6822ba0e0624a19a03 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Thu, 16 May 2024 13:43:57 +0100
Subject: [PATCH 1/2] add left or right tooltip placements

---
 .../static/scss/base/_variable_overrides.scss    |  3 +++
 digiplan/templates/components/map.html           | 16 ++++++++--------
 digiplan/templates/components/panel_2_today.html |  2 +-
 .../templates/components/panel_5_results.html    |  2 +-
 digiplan/templates/widgets/info_button.html      |  2 +-
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/digiplan/static/scss/base/_variable_overrides.scss b/digiplan/static/scss/base/_variable_overrides.scss
index 5c9ed8ba..f83ead54 100644
--- a/digiplan/static/scss/base/_variable_overrides.scss
+++ b/digiplan/static/scss/base/_variable_overrides.scss
@@ -429,6 +429,9 @@ $navbar-light-toggler-border-color: none;
 // Tooltips
 
 // scss-docs-start tooltip-variables
+$tooltip-max-width: 32rem;
+$tooltip-padding-y: 0.75rem;
+$tooltip-padding-x: 0.75rem;
 // scss-docs-end tooltip-variables
 
 // Form tooltips must come after regular tooltips
diff --git a/digiplan/templates/components/map.html b/digiplan/templates/components/map.html
index 0f7c651d..4c2ad107 100644
--- a/digiplan/templates/components/map.html
+++ b/digiplan/templates/components/map.html
@@ -352,7 +352,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -454,7 +454,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -558,7 +558,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -621,7 +621,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -691,7 +691,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -785,7 +785,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -889,7 +889,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
@@ -952,7 +952,7 @@ <h1 class="modal-title fs-5 fw-bold ps-1" id="appModalLabel">EmPowerPlan-Tool</h
                 <span class="scenario-feature__value scenario-feature__value--light">+</span>
               </div>
               <div class="scenario-feature__header--right">
-                <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
+                <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Hier folgen noch weitere Hintergrundinformationen">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#002E50" class="bi bi-info-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                     <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
diff --git a/digiplan/templates/components/panel_2_today.html b/digiplan/templates/components/panel_2_today.html
index dd79a558..c60e3ad0 100644
--- a/digiplan/templates/components/panel_2_today.html
+++ b/digiplan/templates/components/panel_2_today.html
@@ -76,7 +76,7 @@ <h2 class="panel-item__heading panel-item__heading--nopadding">
           <option value="batteries_capacity_statusquo" title="{%  translate 'Kapazität Batteriespeicher' %}">{% translate "Kapazität Batteriespeicher" %}</option>
         </optgroup>
       </select>
-      <img src="{% static 'images/icons/i_info.svg' %}" id="info_tooltip" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" title="{% translate "Keine Auswahl" %}">
+      <img src="{% static 'images/icons/i_info.svg' %}" id="info_tooltip" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate "Keine Auswahl" %}">
     </div>
   </div>
   <div class="panel-item">
diff --git a/digiplan/templates/components/panel_5_results.html b/digiplan/templates/components/panel_5_results.html
index d87006cf..5e384570 100644
--- a/digiplan/templates/components/panel_5_results.html
+++ b/digiplan/templates/components/panel_5_results.html
@@ -80,7 +80,7 @@ <h2 class="panel-item__heading panel-item__heading--nopadding">
           </option>
         </optgroup>
       </select>
-      <img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" id="info_tooltip_results" title="{% translate "Keine Auswahl" %}">
+      <img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" id="info_tooltip_results" data-bs-placement="right" title="{% translate "Keine Auswahl" %}">
     </div>
     <div id="result_simnote" class="panel__simnote"></div>
     <div class="panel-item">
diff --git a/digiplan/templates/widgets/info_button.html b/digiplan/templates/widgets/info_button.html
index 56ca0536..f0d71df7 100644
--- a/digiplan/templates/widgets/info_button.html
+++ b/digiplan/templates/widgets/info_button.html
@@ -1,2 +1,2 @@
 {% load static %}
-<img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" title="{{description}}">
+<img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" data-bs-placement="right" title="{{description}}">

From 1ff8fbf88b269d650b14821247cb210300e97842 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Thu, 16 May 2024 13:44:49 +0100
Subject: [PATCH 2/2] add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4e5985d..3dca72a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 
 ### Fixed
 - 404 errors for missing MVTs
+- truncated tooltips
 
 ## [1.0.0] - 2024-05-07
 ### Added