From 57c5224bf150e0cddd2fe46886873588324f7b1e Mon Sep 17 00:00:00 2001
From: RujitRaval <rujitraval@gmail.com>
Date: Tue, 3 Mar 2020 16:43:07 -0500
Subject: [PATCH 1/2] Add modifiers prop for UncontrolledTooltip

---
 src/BuildingCoolingSystem.js | 4 ++--
 src/BuildingTypeSubType.js   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/BuildingCoolingSystem.js b/src/BuildingCoolingSystem.js
index fd536e43d..6daffc618 100644
--- a/src/BuildingCoolingSystem.js
+++ b/src/BuildingCoolingSystem.js
@@ -93,10 +93,10 @@ export default class BuildingCoolingSystem extends React.Component {
                       </Label>
                   </Col>
               </Row>
-              <UncontrolledTooltip placement="left" target='PTAC'>
+              <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] } }} target='PTAC'>
                 Packaged Terminal Air Conditioners (PTAC) and Packaged Terminal Heat Pumps (PTHP) are ductless, convenient, all-in-one heating and cooling solutions.
               </UncontrolledTooltip>
-              <UncontrolledTooltip placement="left" target='VRF'>
+              <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] } }} target='VRF'>
                 Variable Refrigerant Flow (VRF) systems are typically all-electric systems that use heat pumps to provide space heating and cooling to building spaces.
               </UncontrolledTooltip>
             </div>
diff --git a/src/BuildingTypeSubType.js b/src/BuildingTypeSubType.js
index a64b5ccf2..1e0ad6dda 100644
--- a/src/BuildingTypeSubType.js
+++ b/src/BuildingTypeSubType.js
@@ -190,7 +190,7 @@ export default class BuildingTypeSubType extends React.Component {
                           </Label>
                       </Col>
                   </Row>
-                  <UncontrolledTooltip placement="left" target={this.names[id]}>
+                  <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] } }} target={this.names[id]}>
                     {this.buildingTypeDescription[id]}
                   </UncontrolledTooltip>
                 </div>
-- 
GitLab


From 5ecef500bf2000a1343c1dc43a4169eafb9e30be Mon Sep 17 00:00:00 2001
From: RujitRaval <rujitraval@gmail.com>
Date: Tue, 3 Mar 2020 17:17:43 -0500
Subject: [PATCH 2/2] Add preventOverflow prop

---
 src/BuildingCoolingSystem.js | 4 ++--
 src/BuildingTypeSubType.js   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/BuildingCoolingSystem.js b/src/BuildingCoolingSystem.js
index 6daffc618..98b4dd559 100644
--- a/src/BuildingCoolingSystem.js
+++ b/src/BuildingCoolingSystem.js
@@ -93,10 +93,10 @@ export default class BuildingCoolingSystem extends React.Component {
                       </Label>
                   </Col>
               </Row>
-              <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] } }} target='PTAC'>
+              <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] }, preventOverflow: {boundariesElement: "viewport"} }} target='PTAC'>
                 Packaged Terminal Air Conditioners (PTAC) and Packaged Terminal Heat Pumps (PTHP) are ductless, convenient, all-in-one heating and cooling solutions.
               </UncontrolledTooltip>
-              <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] } }} target='VRF'>
+              <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] }, preventOverflow: {boundariesElement: "viewport"} }} target='VRF'>
                 Variable Refrigerant Flow (VRF) systems are typically all-electric systems that use heat pumps to provide space heating and cooling to building spaces.
               </UncontrolledTooltip>
             </div>
diff --git a/src/BuildingTypeSubType.js b/src/BuildingTypeSubType.js
index 1e0ad6dda..55781478b 100644
--- a/src/BuildingTypeSubType.js
+++ b/src/BuildingTypeSubType.js
@@ -190,7 +190,7 @@ export default class BuildingTypeSubType extends React.Component {
                           </Label>
                       </Col>
                   </Row>
-                  <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] } }} target={this.names[id]}>
+                  <UncontrolledTooltip placement="left" modifiers={{ flip: { behavior: ['left'] }, preventOverflow: {boundariesElement: "viewport"} }} target={this.names[id]}>
                     {this.buildingTypeDescription[id]}
                   </UncontrolledTooltip>
                 </div>
-- 
GitLab