added checking for left or half of screen to adjust tooltlip pop out

diff --git a/campground-map.php b/campground-map.php
index 3298b9c..8115594 100644 (file)
--- a/campground-map.php
+++ b/campground-map.php
@@ -205,13 +205,23 @@ $js_categories = json_encode($categories);
 <?php get_footer(); ?>
     
 <script type="text/javascript">  
-        
+     var side;
      var width = jQuery(window).width();
     jQuery(window).resize( function () {
         var width = jQuery(window).width();
         console.debug(width);
     });
     
+    jQuery("div").mouseover(function(e){
+    var pWidth = jQuery(this).innerWidth(); //use .outerWidth() if you want borders
+    var pOffset = jQuery(this).offset(); 
+    var x = e.pageX - pOffset.left;
+    if(pWidth / 2 > x)
+        side = "left";
+    else
+        side = "right";
+    });
+    
     var x, y, site, mouseover, element, site_name_text, image, id, site_loop, site_power, site_tents, site_water, site_sewer,temp,camper_string;
     var campers = new Array();
     var tool_tip = document.getElementsByClassName('tool-tip');
@@ -294,14 +304,22 @@ $js_categories = json_encode($categories);
     function show_tool_tip(){
 
         tool_tip[0].style.display = "block";
-        if (width < 800){
+        
+        if (width < 400){
             tool_tip[0].style.left = "50%";
             tool_tip[0].style.top = y + "px";
-   
             jQuery(tool_tip[0]).css("transform", "translateX(-50%)");
+        } else if(width > 400 && width < 1024) {
+            if(side === "left"){
+                tool_tip[0].style.left = "50%";
+                tool_tip[0].style.left = (x - 100) + "px";
+            } else {
+                tool_tip[0].style.left = (x - 300) + "px";
+            }
+            tool_tip[0].style.top = y + "px";
         } else {
-             tool_tip[0].style.left = (x - 200) + "px";
-             tool_tip[0].style.top = y + "px";
+            tool_tip[0].style.left = (x - 200) + "px";
+            tool_tip[0].style.top = y + "px";
         }
         
         jQuery(".tool-text").find(".site-name").html("<strong>" + site_name_text + "</strong>");