Indications for Pointing

Arrangements with overlapping components or hover transitions can at times activate unintended mouse actions and add to a subpar experience for your website guests. By using pointing cues, you can deactivate click or touch actions on an element to guarantee that visual-only components do not disrupt activities with other components.

In this tutorial, you will discover: 

1. How to employ pointing cues
2. Common Questions

How to employ pointing cues

You can utilize pointing cues to ensure that only intended components react to click and touch actions. This is beneficial for managing actions on overlapping components (e.g., a background video with overlaid text or icons) or on designs with hover shifts or tooltips.

In Webflow, there exist two choices for pointing cues: 

• Automatic — the default setting for all components, allowing standard click and touch actions
• None — inhibits all pointing cues (i.e., click and touch actions)  

Helpful hint: You can configure Pointing to None to temporarily deactivate click and touch actions for troubleshooting or modifying your design without altering your design’s layout.

How to configure pointing cues to disable actions

To configure pointing cues to disable actions on a component: 

1. Select the component on the canvas
2. Head to Style panel > Effects > Events
3. Adjust Pointing to None 

Components with Pointing set to None appear with a “no click” symbol in the Navigator panel.

Remark: Components with Pointing set to None still receive focus in sequential keyboard navigation with the Tab key. 

Vital: Components with Pointing set to None remain visible but aren’t selectable on the canvas. If you wish to select a component with Pointing set to None, you can do so from the Navigator panel.

Offspring components of a component with Pointing set to None inherit its pointing cue setting and are not denoted with a “no click” symbol in the Navigator panel. If you desire to override the inherited pointing cue setting to make an offspring component interactive, select the offspring component in the Navigator panel, visit Style panel > Effects > Events, and adjust Pointing to Automatic.

Remark: If you deactivate actions on a component by adjusting Pointing to None and subsequently attach an action with a mouse trigger (e.g., mouse click (tap), mouse hover, etc.) to that component, the action will not be triggered.

Common Questions

Why is an overlaid component not clickable even though it’s on top? 

Pointing may be configured to None for the overlaid component, rendering it non-interactive. Adjust Pointing to Automatic to enable actions if this behavior was not intentional.

I configured Pointing to None but still notice undesired actions. Why? 

Other components on the page, particularly parent or overlapping components, might be influencing actions on this component. Ensure you have configured pointing cues suitably for all related components.