Display tooltips on the right for RTL languages

Fixes #925

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 9e386d54bf2bccef0b56c1e331d3fef0494c35dc..17476bb515633cc14eed42d0cd8129bca0ed21de 100644 (file)
--- 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 (file)
index 0000000..dfe850b
--- /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 f0c8c2b20e270ad2e2ebbbe10b9e6e225234e180..834e811c60819ab2c35cd5abe76725f6c44ad18c 100644 (file)
--- 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 20cacea0213992010bb88aeb8083d1f30f732169..a02924a84c3c85c82c496082299e71386eff4cb6 100644 (file)
--- 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 7f0edf072200e11fa14bb1e029c41be93816b4b6..ae512fd42d7368cb91c026b8910e2dd83d67ba50 100644 (file)
--- 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 838c9198f38157eb32f5a80b408e31d7cb85c91a..d074f68815b458fdced15e634aa99df68cbcd730 100644 (file)
--- 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 f4a1a00d46204962c919f77ad2ab36152df10509..18d3d7c5a568c8c2d657865c703ccec36e377545 100644 (file)
--- 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
+ */