From db66e4884772629ba51db905f55c0e48f4cebb94 Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Mon, 9 Mar 2015 22:29:18 +0000
Subject: [PATCH] Display tooltips on the right for RTL languages

Fixes #925
---
 app/assets/javascripts/index.js      |  3 +-
 app/assets/stylesheets/bootstrap.css | 83 +++++++++++++++++++++++++++
 app/assets/stylesheets/common.scss   | 84 ----------------------------
 app/assets/stylesheets/large-ltr.css |  1 +
 app/assets/stylesheets/large-rtl.css |  1 +
 app/assets/stylesheets/small-ltr.css |  1 +
 app/assets/stylesheets/small-rtl.css |  3 +-
 7 files changed, 90 insertions(+), 86 deletions(-)
 create mode 100644 app/assets/stylesheets/bootstrap.css

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 9e386d54b..17476bb51 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -148,7 +148,8 @@ $(document).ready(function () {
     }
   }
 
-  $('.leaflet-control .control-button').tooltip({placement: 'left', container: 'body'});
+  var placement = $('html').attr('dir') === 'rtl' ? 'right' : 'left';
+  $('.leaflet-control .control-button').tooltip({placement: placement, container: 'body'});
 
   var expiry = new Date();
   expiry.setYear(expiry.getFullYear() + 10);
diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css
new file mode 100644
index 000000000..dfe850b80
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap.css
@@ -0,0 +1,83 @@
+/* Rules for bootstrap tooltips */
+
+.tooltip {
+  position: absolute;
+  display: none;
+  color: #333;
+  text-align: left;
+  font-size: 12px;
+  max-width: 250px;
+}
+
+.tooltip.in {
+  opacity: 0.8;
+  z-index: 1030;
+  height: auto;
+  display: block;
+}
+
+.tooltip.top {
+  margin-top: -10px;
+  text-align: center;
+}
+
+.tooltip.right {
+  margin-left: 10px;
+}
+
+.tooltip.bottom {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.tooltip.left {
+  margin-left: -10px;
+  text-align: right;
+}
+
+.tooltip-inner {
+  display: inline-block;
+  padding: 10px;
+  font-weight: normal;
+  background-color: white;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip.top .tooltip-arrow {
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  border-top-color: white;
+  border-width: 5px 5px 0;
+}
+
+.tooltip.right .tooltip-arrow {
+  top: 50%;
+  left: -5px;
+  margin-top: -5px;
+  border-right-color: white;
+  border-width: 5px 5px 5px 0;
+}
+
+.tooltip.left .tooltip-arrow {
+  top: 50%;
+  right: -5px;
+  margin-top: -5px;
+  border-left-color: white;
+  border-width: 5px 0 5px 5px;
+}
+
+.tooltip.bottom .tooltip-arrow {
+  top: -5px;
+  left: 50%;
+  margin-left: -5px;
+  border-bottom-color: white;
+  border-width: 0 5px 5px;
+}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f0c8c2b20..834e811c6 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -466,90 +466,6 @@ nav.secondary {
   margin-top: 50px;
 }
 
-/* Rules for bootstrap tooltips */
-
-.tooltip {
-  position: absolute;
-  display: none;
-  color: #333;
-  text-align: left;
-  font-size: 12px;
-  max-width: 250px;
-}
-
-.tooltip.in {
-  opacity: 0.8;
-  z-index: 1030;
-  height: auto;
-  display: block;
-}
-
-.tooltip.top {
-  margin-top: -10px;
-  text-align: center;
-}
-
-.tooltip.right {
-  margin-left: 10px;
-}
-
-.tooltip.bottom {
-  margin-top: 10px;
-  text-align: center;
-}
-
-.tooltip.left {
-  margin-left: -10px;
-  text-align: right;
-}
-
-.tooltip-inner {
-  display: inline-block;
-  padding: 10px;
-  font-weight: normal;
-  background-color: white;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.tooltip.top .tooltip-arrow {
-  bottom: -5px;
-  left: 50%;
-  margin-left: -5px;
-  border-top-color: white;
-  border-width: 5px 5px 0;
-}
-
-.tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: -5px;
-  margin-top: -5px;
-  border-right-color: white;
-  border-width: 5px 5px 5px 0;
-}
-
-.tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: -5px;
-  margin-top: -5px;
-  border-left-color: white;
-  border-width: 5px 0 5px 5px;
-}
-
-.tooltip.bottom .tooltip-arrow {
-  top: -5px;
-  left: 50%;
-  margin-left: -5px;
-  border-bottom-color: white;
-  border-width: 0 5px 5px;
-}
-
 /* Rules for Leaflet maps */
 
 .leaflet-control .control-button {
diff --git a/app/assets/stylesheets/large-ltr.css b/app/assets/stylesheets/large-ltr.css
index 20cacea02..a02924a84 100644
--- a/app/assets/stylesheets/large-ltr.css
+++ b/app/assets/stylesheets/large-ltr.css
@@ -1,4 +1,5 @@
 /*
  *= require ltr/common
+ *= require bootstrap
  *= require large
  */
diff --git a/app/assets/stylesheets/large-rtl.css b/app/assets/stylesheets/large-rtl.css
index 7f0edf072..ae512fd42 100644
--- a/app/assets/stylesheets/large-rtl.css
+++ b/app/assets/stylesheets/large-rtl.css
@@ -1,4 +1,5 @@
 /*
  *= require rtl/common
+ *= require bootstrap
  *= require large
  */
diff --git a/app/assets/stylesheets/small-ltr.css b/app/assets/stylesheets/small-ltr.css
index 838c9198f..d074f6881 100644
--- a/app/assets/stylesheets/small-ltr.css
+++ b/app/assets/stylesheets/small-ltr.css
@@ -1,4 +1,5 @@
 /*
  *= require ltr/common
+ *= require bootstrap
  *= require ltr/small
  */
diff --git a/app/assets/stylesheets/small-rtl.css b/app/assets/stylesheets/small-rtl.css
index f4a1a00d4..18d3d7c5a 100644
--- a/app/assets/stylesheets/small-rtl.css
+++ b/app/assets/stylesheets/small-rtl.css
@@ -1,4 +1,5 @@
 /*
  *= require rtl/common
+ *= require bootstrap
  *= require rtl/small
- */
\ No newline at end of file
+ */
-- 
2.43.2