🧩 LTooltip

Display a tooltip on the map

TIP

Tooltip placed inside a marker will by default appear on marker hover.

🧪 Demo

<script setup lang="ts">
import {
    LCircle,
    LCircleMarker,
    LIcon,
    LMap,
    LMarker,
    LPolygon,
    LPolyline,
    LRectangle,
    LTileLayer,
    LTooltip
} from '@maxel01/vue-leaflet'
</script>

<template>
    <LMap :zoom="9" :center="[41.6329, -87.3327]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />

        <LMarker :lat-lng="[41.8329, -87.7327]">
            <LTooltip> Hi! I'm staying here on this location!</LTooltip>
        </LMarker>

        <LMarker :lat-lng="[41.75, -87.65]" draggable>
            <LTooltip> Hi! You can drag me around!</LTooltip>
        </LMarker>

        <LMarker :lat-lng="[41.7654, -87.219482]">
            <LIcon icon-url="https://placebear.com/32/32" :icon-size="[32, 48]" />
            <LTooltip> What a tiny bear</LTooltip>
        </LMarker>

        <LMarker :lat-lng="[41.61322, -87.219482]">
            <LIcon>
                <div class="div-icon">Custom HTML icon</div>
            </LIcon>
            <LTooltip> And with a tooltip too!</LTooltip>
        </LMarker>

        <LPolygon
            :lat-lngs="[
                [41.6329, -87.5327],
                [41.5329, -87.2327],
                [41.3329, -87.3327],
                [41.6329, -87.5327]
            ]"
            color="#41b782"
            :fill="true"
            :fillOpacity="0.5"
            fillColor="#41b782"
        >
            <LTooltip> Hi! I'm a polygon, nice to meet you!</LTooltip>
        </LPolygon>

        <LPolyline
            :lat-lngs="[
                [41.9329, -87.9327],
                [41.8329, -87.8327]
            ]"
            color="green"
        >
            <LTooltip> Hey! Polyline here, at your service!</LTooltip>
        </LPolyline>

        <LRectangle
            :lat-lngs="[
                [41.734852, -86.809485],
                [41.742596, -86.628731],
                [41.641487, -86.590568],
                [41.634787, -86.658337]
            ]"
            :fill="true"
            color="#35495d"
        >
            <LTooltip> Good day! Rectangle is my name!</LTooltip>
        </LRectangle>

        <LCircle :lat-lng="[41.4329, -87.7327]" :radius="10000" color="green">
            <LTooltip> Hi! I'm a green Circle!</LTooltip>
        </LCircle>

        <LCircleMarker :lat-lng="[41.4329, -87.95]" :radius="20">
            <LTooltip> Hi! You can call me Circle Marker!</LTooltip>
        </LCircleMarker>
    </LMap>
</template>

<style>
.div-icon {
    background-color: skyblue;
    width: fit-content;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px blue solid;
}
</style>

⚙️ Props

This component does not have any specific props.

🔗 Inherited props

from PopperProps

Prop name	Description	Type	Reactive	Default	Required
content	Sets the HTML content of the overlay while initializing. If a function is passed the source layer will be passed to the function. The function should return a String or HTMLElement to be used in the overlay.	string | HTMLElement	true	-	false

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	T	initOnly	-	false

📡 Emits

Event	Arguments	Description
ready	Tooltip	Triggers when the component is ready

🎯 Slots

Name	Description
default	Content to be rendered inside the Leaflet tooltip's container. This slot replaces the default content and allows full customization of the tooltip's appearance. The content will be injected into the tooltip's root DOM element.

🧭 Exposes

Name	Type	Description
root	Ref<HTMLElement | undefined>	The root DOM element of the Leaflet tooltip. This element is managed by Leaflet's Tooltip class. You can use it to directly manipulate the tooltip's container (e.g. styling, event listeners), or alternatively use the default slot for custom content.
leafletObject	Ref<Tooltip | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).