# Drag Hint

The Drag Hint is an element that gets dynamically created when the drag action starts. It is used for the purpose of dragging instead of the drag target element itself.

To render a drag hint when dragging, configure the [`hint`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetdirective#hint) option ot the [`DragTarget`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetdirective) directive. It accepts both `boolean` and [`HintSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/hintsettings) parameters. The default value of the `hint` option is `false`. When the option is enabled, the default rendered hint will be a copy of the drag target.

If you use a [`HintSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/hintsettings) parameter, the DragTarget enables you to configure the following options:

* `hintTemplate`—Renders the passed template as a hint of the current DragTarget (used to create custom hints).
* `hintClass`—The CSS classes that will be rendered on the hint host element when the default hint is utilized
* `appendTo`—Specifies the container the hint will be appended to. By default, the hint is appended to the document body.

## Default Hint

Setting the `hint` option to `true` will render an exact copy of the DragTarget element by default. The default hint can be customized by providing a [`HintSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/hintsettings) parameter and setting the `hintClass` option. This allows you to render a custom CSS class on the hint element.

The following example demonstrates how to render a copy of the original element during drag.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/utils/draganddrop/hint/source.txt)

## Custom Hint

To render a custom hint, provide a [`HintSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/hintsettings) parameter and set the `hintTemplate` option.

The following example demonstrates this approach.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/utils/draganddrop/hint/custom/source.txt)

## Suggested Links

* [API Reference of the DragTarget](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetdirective)
* [API Reference of the DropTarget](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetdirective)