> ## Documentation Index
> Fetch the complete documentation index at: https://help.standards.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Click & Hover Behaviors

Click and hover behaviors are fundamental settings that transform static pages into a dynamic website.

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/on-click-hover-widget.gif?s=0b56820ce39f7f81fd95989a6a171fc8" alt="Button selected with click and hover contextual toolbar showing" width="1200" height="600" data-path="images/on-click-hover-widget.gif" />
</Frame>

***

## Click

**Click** is a grouping of settings that trigger a behavior from a mouse click and are contextual to the element it’s enabled on. **Click** can be enabled on various elements such as **media** and **button**.

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/on-click-dropdown.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=a977000a9fcddf65bf5607a740add8a0" alt="Click drodown menu with a list of behavior options" width="1200" height="600" data-path="images/on-click-dropdown.png" />
</Frame>

### Common uses

* Hyperlinking **Text** for navigation and external links
* Downloading files from **Media** and **Buttons**
* Copying hex codes from color **Swatches**
* View full list of behaviors below

### Applying click behaviors

<Steps>
  <Step title="Select element to recieve click behavior">
    Choose the element from the left sidebar contents list or from in body. Note: Not all layers can recieve click behaviors.
  </Step>

  <Step title="Open click behavior menu">
    After selecting an element, a small contextual toolbar will appear. Select the click button (cursor clicking icon) to open the menu.
  </Step>

  <Step title="Set behavior">
    Select the desired behavior from the listed options then fill the additional information suitable for each behavior
  </Step>
</Steps>

<Info>
  **Tip:** Make sure the desired element is selected. It is easy to select groups, rows, columns which do not have **Click** options.
</Info>

### Click behaviors

<AccordionGroup>
  <Accordion title="Link to page">
    Link to other **pages**. Specific sections of pages can be set. Next or previous page can be set to automatically navigate.
  </Accordion>

  <Accordion title="Jump to">
    Auto-scoll to the top or bottom of a page.
  </Accordion>

  <Accordion title="Link to URL">
    Link to external sites with an option to open in a new tab
  </Accordion>

  <Accordion title="Download file">
    Select an uploaded file that can be downloaded by the viewer
  </Accordion>

  <Accordion title="Copy & share">
    Enter text or a URL that can be copied to the viewer’s clipboard to paste elsewhere
  </Accordion>

  <Accordion title="Email">
    Automatically copy an email and open the viewer’s email app.
  </Accordion>

  <Accordion title="Copy HEX">
    Automatically copy the HEX color code into your clipboard. This is only available on **Color Swatch** and **Albers’ Proportion.**
  </Accordion>

  <Accordion title="Open & close">
    Open and close the element. This is only available on **Menu** and **Dropdown**.
  </Accordion>

  <Accordion title="Forward, Backward">
    Progress a **Sequence** forward and backward.
  </Accordion>

  <Accordion title="Change language">
    Change to the chosen language.
  </Accordion>
</AccordionGroup>

***

## Hover

**Hover** is a grouping of settings that trigger a behavior from a mouse hovering over and are contextual to the element it’s enabled on. **Hover** can be enabled on various elements such as **media** and **button**.

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/on-hover-dropdown.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=637bef3e5fc07b579b17fd6f61ffd74e" alt="Hover drodown menu with a list of behavior options" width="1200" height="600" data-path="images/on-hover-dropdown.png" />
</Frame>

### Common uses

* Showing **Tooltips**
* Swapping between two **Media** files
* Playing video **Media**

### Applying hover behaviors

<Step title="Choose the element from the left sidebar contents list or from in body. Note: Not all layers can recieve hover behaviors.">
  Choose the element from the left sidebar contents list or from in body. Note: Not all layers can recieve hover behaviors.
</Step>

<Step title="After selecting an element, a small contextual toolbar will appear. Select the hover button (cursor hovering icon) to open the menu.">
  After selecting an element, a small contextual toolbar will appear. Select the hover button (cursor hovering icon) to open the menu.
</Step>

<Step title="Select the desired behavior from the listed options then fill the additional information suitable for each behavior">
  Select the desired behavior from the listed options then fill the additional information suitable for each behavior
</Step>

<Info>
  **Tip:** Make sure the desired element is selected. It is easy to select groups, layouts, columns which do not have **On click** options
</Info>

### Hover behaviors

<AccordionGroup>
  <Accordion title="Show Tooltip">
    Display a **Tooltip** over the hovered element. Tip: manage tooltip appearance from the styles tab of the right sidebar.
  </Accordion>

  <Accordion title="Swap Media">
    Change back and forth between two **Media** files
  </Accordion>

  <Accordion title="Play Video">
    Play and pause video **Media**
  </Accordion>

  <Accordion title="Play Audio">
    Play and pause audio in video **Media**
  </Accordion>

  <Accordion title="Track Cursor">
    Colors follow cursor inside of **Albers’ Proportion**
  </Accordion>
</AccordionGroup>