# Tooltips for Shapes

Drawing shapes are rendered inside a single [`Surface`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/surface) rather than as individual DOM elements, so they have no native `title` tooltip. To reveal a label or extra details on hover—for example, the value behind a segment or the name of a region—combine the pointer events of the Surface with a floating container, as shown in the following example.

The example combines three pieces—detecting the hovered shape, storing the content to display, and positioning the tooltip—described in the following sections.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/tooltips-for-shapes/source.txt)

## Detecting the Hovered Shape

Bind to the `mouseenter` and `mouseleave` events of the Surface to detect when the pointer enters or leaves a shape. The [`SurfaceEvent`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/surfaceevent) argument exposes the target `element`, which lets you look up the data associated with the hovered shape and decide what to display. Show the tooltip on `mouseenter` and hide it again on `mouseleave`.

## Storing the Tooltip Content

A shape has no dedicated tooltip property, so attach the content you want to show as a custom field on its `options` when you create the shape—for example, `name` or `tooltipContent`.

```javascript
const shape = Path.fromRect(rect, {
    fill: { color: "#ff0000" },
    tooltipContent: "Region A"
});
```

In the `mouseenter` handler, read that field from `element.options`. Check that it is set before showing the tooltip, so shapes that carry no content—such as a background or a border—do not trigger one.

## Positioning the Tooltip

Position the tooltip with the [Popup](https://www.telerik.com/kendo-vue-ui-develop/components/popup) component by using either of the following approaches:

* Combine [`element.bbox()`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/element#bbox), which returns the shape bounding box in the Surface coordinate space, with the bounding rectangle of the Surface's host element to calculate an absolute position on the page.
* Alternatively, anchor the popup directly to the hovered DOM node through `SurfaceEvent.originalEvent.target`, when your Popup component supports anchoring to an element instead of a fixed offset.

## Suggested Links

* [Drawing Shapes](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/basic-shapes)
* [API Reference of the Drawing Library](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api)
* [Surface API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/surface)
* [SurfaceEvent API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/surfaceevent)
* [Popup](https://www.telerik.com/kendo-vue-ui-develop/components/popup)