Merge pull request #151 from empowerplan/fix/tooltip-truncated

Fix/tooltip truncated
empowerplan · May 16, 2024 · 2164c1b · 2164c1b
2 parents 9cc85ba + 1ff8fbf
commit 2164c1b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 11 deletions.
diff --git 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

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}}">