Display tooltips on the right for RTL languages

Fixes #925
This commit is contained in:
Tom Hughes 2015-03-09 22:29:18 +00:00
parent 6feea89e7b
commit db66e48847
7 changed files with 90 additions and 86 deletions

View file

@ -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);

83
app/assets/stylesheets/bootstrap.css vendored Normal file
View file

@ -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;
}

View file

@ -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 {

View file

@ -1,4 +1,5 @@
/*
*= require ltr/common
*= require bootstrap
*= require large
*/

View file

@ -1,4 +1,5 @@
/*
*= require rtl/common
*= require bootstrap
*= require large
*/

View file

@ -1,4 +1,5 @@
/*
*= require ltr/common
*= require bootstrap
*= require ltr/small
*/

View file

@ -1,4 +1,5 @@
/*
*= require rtl/common
*= require bootstrap
*= require rtl/small
*/
*/