diff --git a/debug/map/tooltip.html b/debug/map/tooltip.html index d6c40e16..63f43cd8 100644 --- a/debug/map/tooltip.html +++ b/debug/map/tooltip.html @@ -49,7 +49,7 @@ iconSize: [50, 50] }); L.marker([41.22, 9.48], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip following mouse', {sticky: true, direction: 'auto'}); - L.marker([41.23, 9.47], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip'); + L.marker([41.23, 9.47], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip with custom offset', {direction: 'top', offset: [-25, -25]}); L.marker([41.23, 9.42], {draggable: true}).addTo(map).bindTooltip('Draggable marker tooltip', {permanent: true, direction: 'auto'}); L.marker([41.19, 9.43]).addTo(map).bindTooltip('Clickable marker tooltip', {permanent: true, interactive: true}).on('click', function () { alert('clicked!'); }); diff --git a/dist/leaflet.css b/dist/leaflet.css index b431da47..35983080 100644 --- a/dist/leaflet.css +++ b/dist/leaflet.css @@ -573,6 +573,12 @@ /* Directions */ +.leaflet-tooltip-bottom { + margin-top: 6px; +} +.leaflet-tooltip-top { + margin-top: -6px; +} .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; @@ -589,6 +595,12 @@ margin-left: -6px; border-bottom-color: #fff; } +.leaflet-tooltip-left { + margin-left: -6px; +} +.leaflet-tooltip-right { + margin-left: 6px; +} .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; diff --git a/spec/suites/layer/TooltipSpec.js b/spec/suites/layer/TooltipSpec.js index c30c08c1..ebce1273 100644 --- a/spec/suites/layer/TooltipSpec.js +++ b/spec/suites/layer/TooltipSpec.js @@ -82,25 +82,63 @@ describe('Tooltip', function () { expect(spy.calledOnce).to.be(true); }); - it("can be forced on top direction", function () { + it("honours offset on left direction", function () { var layer = new L.Marker(center).addTo(map); var spy = sinon.spy(); layer.on('click', spy); + layer.bindTooltip('A long tooltip that should be displayed on the left', {permanent: true, direction: 'left', interactive: true, offset: [-20, -20]}); + expect(map.hasLayer(layer._tooltip)).to.be(true); + happen.at('click', 150, 180); + expect(spy.calledOnce).to.be(false); + happen.at('click', 130, 160); + expect(spy.calledOnce).to.be(true); + }); + + it("can be forced on top direction", function () { + var layer = L.circleMarker(center).addTo(map); + var spy = sinon.spy(); + layer.on('click', spy); + layer.bindTooltip('A tooltip that should be displayed on the top', {permanent: true, direction: 'top', interactive: true}); expect(map.hasLayer(layer._tooltip)).to.be(true); - happen.at('click', 200, 170); // Marker is on the map center, which is 400px large. + happen.at('click', 200, 180); // Marker is on the map center, which is 400px large. + expect(spy.calledOnce).to.be(true); + }); + + it("honours offset on top direction", function () { + var layer = L.circleMarker(center).addTo(map); + var spy = sinon.spy(); + layer.on('click', spy); + + layer.bindTooltip('A tooltip that should be displayed on the top', {permanent: true, direction: 'top', interactive: true, offset: [-20, -20]}); + happen.at('click', 200, 180); + expect(spy.calledOnce).to.be(false); + happen.at('click', 180, 150); expect(spy.calledOnce).to.be(true); }); it("can be forced on bottom direction", function () { - var layer = new L.Marker(center).addTo(map); + var layer = L.circleMarker(center).addTo(map); var spy = sinon.spy(); layer.on('click', spy); layer.bindTooltip('A tooltip that should be displayed on the top', {permanent: true, direction: 'bottom', interactive: true}); expect(map.hasLayer(layer._tooltip)).to.be(true); - happen.at('click', 200, 210); // Marker is on the map center, which is 400px large. + happen.at('click', 200, 220); // Marker is on the map center, which is 400px large. + expect(spy.calledOnce).to.be(true); + }); + + it("honours offset on bottom direction", function () { + var layer = L.circleMarker(center).addTo(map); + var spy = sinon.spy(); + layer.on('click', spy); + + layer.bindTooltip('A tooltip that should be displayed on the top', {permanent: true, direction: 'bottom', interactive: true, offset: [20, 20]}); + expect(map.hasLayer(layer._tooltip)).to.be(true); + happen.at('click', 200, 220); + expect(spy.calledOnce).to.be(false); + happen.at('click', 220, 230); expect(spy.calledOnce).to.be(true); }); diff --git a/src/layer/Tooltip.js b/src/layer/Tooltip.js index 1f66cbe5..d96ad9f9 100644 --- a/src/layer/Tooltip.js +++ b/src/layer/Tooltip.js @@ -11,9 +11,9 @@ * ``` * Note about tooltip offset. Leaflet takes two options in consideration * for computing tooltip offseting: - * - the `offset` Tooltip option: it defaults to [6, -6], because the tooltip - * tip is 6px width and height. Remember to change this value if you override - * the tip in CSS. + * - the `offset` Tooltip option: it defaults to [0, 0], and it's specific to one tooltip. + * Add a positive x offset to move the tooltip to the right, and a positive y offset to + * move it to the bottom. Negatives will move to the left and top. * - the `tooltipAnchor` Icon option: this will only be considered for Marker. You * should adapt this value if you use a custom icon. */ @@ -29,10 +29,9 @@ L.Tooltip = L.DivOverlay.extend({ // `Map pane` where the tooltip will be added. pane: 'tooltipPane', - // @option offset: Point = Point(6, -6) - // The offset of the tooltip position. Update it if you customize the - // tooltip tip in CSS. - offset: [6, -6], + // @option offset: Point = Point(0, 0) + // Optional offset of the tooltip position. + offset: [0, 0], // @option direction: String = 'auto' // Direction where to open the tooltip. Possible values are: `right`, `left`, @@ -124,17 +123,17 @@ L.Tooltip = L.DivOverlay.extend({ anchor = this._getAnchor(); if (direction === 'top') { - pos = pos.add(L.point(-tooltipWidth / 2, -tooltipHeight + offset.y + anchor.y)); + pos = pos.add(L.point(-tooltipWidth / 2 + offset.x, -tooltipHeight + offset.y + anchor.y)); } else if (direction === 'bottom') { - pos = pos.subtract(L.point(tooltipWidth / 2, offset.y)); + pos = pos.subtract(L.point(tooltipWidth / 2 - offset.x, -offset.y)); } else if (direction === 'center') { - pos = pos.subtract(L.point(tooltipWidth / 2, tooltipHeight / 2 - anchor.y)); + pos = pos.subtract(L.point(tooltipWidth / 2 + offset.x, tooltipHeight / 2 - anchor.y + offset.y)); } else if (direction === 'right' || direction === 'auto' && tooltipPoint.x < centerPoint.x) { direction = 'right'; - pos = pos.add([offset.x + anchor.x, anchor.y - tooltipHeight / 2]); + pos = pos.add([offset.x + anchor.x, anchor.y - tooltipHeight / 2 + offset.y]); } else { direction = 'left'; - pos = pos.subtract(L.point(offset.x + tooltipWidth + anchor.x, tooltipHeight / 2 - anchor.y)); + pos = pos.subtract(L.point(tooltipWidth + anchor.x - offset.x, tooltipHeight / 2 - anchor.y - offset.y)); } L.DomUtil.removeClass(container, 'leaflet-tooltip-right');