<!--
{
  "availability" : [
    "MapKit JS: 5.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "MapKitJS",
  "identifier" : "/documentation/MapKitJS/AnnotationCalloutDelegate",
  "metadataVersion" : "0.1.0",
  "role" : "Interface",
  "symbol" : {
    "kind" : "Interface",
    "modules" : [
      "MapKit JS"
    ],
    "preciseIdentifier" : "struct/mapkit.AnnotationCalloutDelegate"
  },
  "title" : "AnnotationCalloutDelegate"
}
-->

# AnnotationCalloutDelegate

Methods for customizing the behavior and appearance of an annotation callout.

```
interface AnnotationCalloutDelegate
```

## Overview

You can customize an annotation callout by replacing the callout element, or by providing custom content to display inside a standard callout bubble. The callout delegate contains methods you implement to customize the appearance and behavior of the callout. All the methods are optional, enabling you to override any or all of the behavior.

### Creating a Custom Callout

This example shows how to replace the standard callout with a custom callout for a [`MarkerAnnotation`](/documentation/MapKitJS/MarkerAnnotation).

```javascript
const calloutDelegate = {

    // Return a div element and populate it with information from the
    // annotation, including a link to a review site.
    calloutElementForAnnotation: function(annotation) {
        const element = document.createElement("div");
        element.className = "review-callout";
        const title = element.appendChild(document.createElement("h1"));
        title.textContent = annotation.title;
        const link = element.appendChild(document.createElement("a"));
        link.href = annotation.data.reviewLink;
        link.textContent = "Review";
        // Add more content.
        element.style.width = "240px";
        element.style.height = "100px";
        return element;
    },
};

// Create an annotation with a link to be displayed in the callout.
const annotation = new mapkit.MarkerAnnotation(
    new mapkit.Coordinate(35.7019272, 139.575628),
    {
        callout: calloutDelegate,
        title: "...",
        data: {
            reviewLink: "http://..."    // Link to review site.
            // More info like address, phone number, etc.
        }
    }
);
```

### Customizing the Content in a Standard Callout

You may want to provide your own content to display inside the callout bubble, without replacing the whole element as in the previous code listing. The following example is similar to the previous one, but uses the standard callout bubble to display custom content.

```javascript
const calloutDelegate = {
    // Return a div element and populate it with information from the
    // annotation, including a link to a review site.
    calloutContentForAnnotation: function(annotation) {
        const element = document.createElement("div");
        element.className = "review-callout-content";
        const title = element.appendChild(document.createElement("h1"));
        title.textContent = annotation.title;
        const link = element.appendChild(document.createElement("a"));
        link.href = annotation.data.reviewLink;
        link.textContent = "Review";
        // Add more content.
        return element;
    }
};

// Create an annotation with a link to be displayed in the callout.
const annotation = new mapkit.MarkerAnnotation(
    new mapkit.Coordinate(35.7019272, 139.575628),
    {
        callout: calloutDelegate,
        title: "...",
        data: {
            reviewLink: "http://..."    // Link to review site.
            // More info like address, phone number, etc.
        }
    }
);
```

## Topics

### Customizing callout appearance

[`calloutAnchorOffsetForAnnotation(annotation, size)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutAnchorOffsetForAnnotation)

Returns a point determining the callout’s anchor offset.

[`calloutShouldAppearForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutShouldAppearForAnnotation)

Determines whether the callout appears for an annotation.

[`calloutShouldAnimateForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutShouldAnimateForAnnotation)

Determines whether the callout animates.

[`calloutAppearanceAnimationForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutAppearanceAnimationForAnnotation)

Returns a CSS animation to use when the callout appears.

### Providing elements

[`calloutContentForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutContentForAnnotation)

Returns custom content for the callout bubble.

[`calloutElementForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutElementForAnnotation)

Returns an element representing a custom callout.

[`calloutLeftAccessoryForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutLeftAccessoryForAnnotation)

Returns an element to use as a custom accessory on the left side of the callout content area.

[`calloutRightAccessoryForAnnotation(annotation)`](/documentation/MapKitJS/AnnotationCalloutDelegate/calloutRightAccessoryForAnnotation)

Returns an element to use as a custom accessory on the right side of the callout content area.


---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)