# Highlights - Tooltips/Hotspots

To initiate the creation of a Tooltips or Hotspots, navigate to the "Engagement" section "Highlights" and click on "Create Tooltip/Hotspot" or use the shortcut "Command + K" or "CTRL + K" and enter "Create Tooltip" or "Create Hotspot" to access the respective page.

<figure><img src="/files/x32iBlH1MxiAWUOPVKUs" alt=""><figcaption></figcaption></figure>

Choose between Tooltip or Hotspot based on your needs. Pick a template and customize it according to your content and specific requirements.

<figure><img src="/files/iJwsdvhleRtDsw0eQgyD" alt=""><figcaption></figcaption></figure>

You can include sections by clicking on the "+" symbol and choosing the desired type (text, header, button, video, image, embed) that you wish to add.

You have the option to add sections either at the bottom or on the right side.

You can include up to three sections in a row and any desired number of sections in a column.

<div><figure><img src="/files/EMu1wd9IQ8x4umWVsEiX" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zKhlVm58LfrfUC3BDOjf" alt=""><figcaption></figcaption></figure></div>

Enhance the appearance of your Tooltip or Hotspot by applying styles through the Styles tab, and fine-tune its configuration in the Settings tab.

Within the Settings, you have the ability to control the audience and display location of your Tooltip or Hotspot by incorporating segments.&#x20;

Moreover, you need to incorporate element data such as data-beacon-id, id, or classname+xpath for the specific element to which you intend to display the tooltip. Additionally, specify the path where the tooltip should be visible.

Once you've made all the necessary modifications, switch the status to "live" to apply the changes and make them visible to your users.

<figure><img src="/files/Uiv4msxLWAmvxZCRx7g1" alt=""><figcaption></figcaption></figure>

[Click here](https://chrome.google.com/webstore/detail/beaconli/mmclgbikmomngmmilcjodlhfipikjeji?hl=en) to install the Beacon Editor extension and enable visual editor.

<figure><img src="/files/j3lVL0Asc04pdpKmSUQf" alt=""><figcaption></figcaption></figure>

Utilize our chrome extension to create or modify Tooltips or Hotspots. Click on "Create New" or use shortcut "command + E" or "CTRL + E" and navigate to the Tooltips section, where you can view the list of your existing Tooltips and Hotspots. Use the "Create New" button to initiate the creation of a new Tooltip or Hotspot.

<figure><img src="/files/uykeu3K3nN4kzOE6DNsw" alt=""><figcaption></figcaption></figure>

To preview existing tooltips or hotspots, navigate to the corresponding element page and click on the play icon.

When creating a new tooltip or hotspot, use the magic tool. Choose the magic tool, then click on the element where you wish to display the tooltip and customize it according to your needs.

<figure><img src="/files/PzCIp2Q3JPglldeUsLaM" alt=""><figcaption></figcaption></figure>

The following illustrates the display of the tooltip for the chosen element.

<figure><img src="/files/yK60LLYBPEFdTSshB23R" alt=""><figcaption></figcaption></figure>

The following illustrates the display of the hotspot for the chosen element.

<figure><img src="/files/iDO81cC5CGpOaDgJrhlY" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.beacon.li/highlights-tooltips-hotspots.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.