Skip to content

Instantly share code, notes, and snippets.

@Falke-Design

Falke-Design/map-tooltip-direction-rtl.html

Created July 8, 2020 20:38
Show Gist options
  • Save Falke-Design/86c72cba5849549b92faaf772beee4d4 to your computer and use it in GitHub Desktop.
Save Falke-Design/86c72cba5849549b92faaf772beee4d4 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Tooltip direction RTL test file
Raw
map-tooltip-direction-rtl.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" />
<script src="../../dist/leaflet-src.js"></script>
<style>
#map{
width: 100%;
}
html, body{
direction: rtl;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="populate">Populate with 10 markers</button>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([40.0269319,32.83604819], 15)
.addLayer(osm);
L.marker([40.0269319,32.83604819]).addTo(map);
L.tooltip({permanent: true}).setContent('Permanent Unbound').setLatLng([40.0269319,32.83604819]).addTo(map);
L.tooltip({permanent: true, direction: 'bottom'}).setContent('Permanent Unbound').setLatLng([40.0269319,32.83604819]).addTo(map);
L.tooltip({permanent: true, direction: 'top'}).setContent('Permanent Unbound').setLatLng([40.0269319,32.83604819]).addTo(map);
L.tooltip({permanent: true, direction: 'right'}).setContent('Permanent Unbound').setLatLng([40.0269319,32.83604819]).addTo(map);
L.tooltip({permanent: true, direction: 'center'}).setContent('Permanent Unbound').setLatLng([40.0269319,32.83604819]).addTo(map);
L.tooltip({permanent: true, direction: 'auto'}).setContent('Permanent Unbound').setLatLng([40.0269319,32.83604819]).addTo(map);
L.marker([40.0299419,32.83604819]).addTo(map);
L.tooltip({permanent: false}).setContent('Not Permanent Unbound').setLatLng([40.0299419,32.83604819]).addTo(map);
L.tooltip({permanent: false, direction: 'bottom'}).setContent('Not Permanent Unbound').setLatLng([40.0299419,32.83604819]).addTo(map);
L.tooltip({permanent: false, direction: 'top'}).setContent('Not Permanent Unbound').setLatLng([40.0299419,32.83604819]).addTo(map);
L.tooltip({permanent: false, direction: 'right'}).setContent('Not Permanent Unbound').setLatLng([40.0299419,32.83604819]).addTo(map);
L.tooltip({permanent: false, direction: 'center'}).setContent('Not Permanent Unbound').setLatLng([40.0299419,32.83604819]).addTo(map);
L.tooltip({permanent: false, direction: 'auto'}).setContent('Not Permanent Unbound').setLatLng([40.0299419,32.83604819]).addTo(map);
var marker = L.marker([40.03310213098784, 32.80667781829835]).addTo(map);
marker.bindTooltip('Not Permanent Bound',{permanent: false}).openTooltip();
var marker2 = L.marker([40.03205063109858, 32.80667781829835]).addTo(map);
marker2.bindTooltip('Not Permanent Bound',{permanent: false, direction: 'bottom'}).openTooltip();
var marker3 = L.marker([40.03116341545761, 32.80667781829835]).addTo(map);
marker3.bindTooltip('Not Permanent Bound',{permanent: false, direction: 'top'}).openTooltip();
var marker4 = L.marker([40.03047335086914, 32.80667781829835]).addTo(map);
marker4.bindTooltip('Not Permanent Bound',{permanent: false, direction: 'left'}).openTooltip();
var marker5 = L.marker([40.02965183630395, 32.80667781829835]).addTo(map);
marker5.bindTooltip('Not Permanent Bound',{permanent: false, direction: 'center'}).openTooltip();
var marker6 = L.marker([40.03310213098784, 32.81925201416016]).addTo(map);
marker6.bindTooltip('Permanent Bound',{permanent: true}).openTooltip();
var marker7 = L.marker([40.03205063109858, 32.81925201416016]).addTo(map);
marker7.bindTooltip('Permanent Bound',{permanent: true, direction: 'bottom'}).openTooltip();
var marker8 = L.marker([40.03116341545761, 32.81925201416016]).addTo(map);
marker8.bindTooltip('Permanent Bound',{permanent: true, direction: 'top'}).openTooltip();
var marker9 = L.marker([40.03047335086914, 32.81925201416016]).addTo(map);
marker9.bindTooltip('Permanent Bound',{permanent: true, direction: 'left'}).openTooltip();
var marker10 = L.marker([40.02965183630395, 32.81925201416016]).addTo(map);
marker10.bindTooltip('Permanent Bound',{permanent: true, direction: 'center'}).openTooltip();
var poly = L.polygon([[40.02531407536202,32.804961204528816],[40.024853993628774, 32.8178358078003],[40.01966142753885, 32.81315803527833]]).addTo(map)
poly.bindTooltip('Sticky Permanent Bound --> Bug, not following mouse',{sticky: true,permanent: true,direction:'auto'}).openTooltip();
var poly2 = L.polygon([[40.023046499638816, 32.82976627349854 ],[40.02360518471253, 32.840452194213874],[40.0186754526281,32.83637523651124]]).addTo(map)
poly2.bindTooltip('Sticky not Permanent Bound',{sticky: true,permanent: false,direction:'auto'}).openTooltip();
</script>
</body>
</html>
@Falke-Design
Copy link
Author

Created for Leaflet/Leaflet#7201

@johnd0e
Copy link

johnd0e commented Nov 8, 2021

screen.css is missed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment