Skip to content

Show Field Description

The Show Field Description function displays Voxel field descriptions as visible text below field labels instead of hidden tooltips. This improves form usability by making helpful information immediately visible to users.

Overview

By default, Voxel shows field descriptions in tooltip popups when users click an info icon. This function converts those descriptions into visible subtitle text that appears directly below each field label.

Key Features

  • Displays field descriptions as visible subtitles
  • Works with Create Post form widget
  • Works with Login/Register widget
  • Elementor styling controls for typography and spacing
  • Hides original tooltip icons
  • Works in Elementor editor preview
  • Supports repeater and switcher fields

Setup Instructions

Step 1: Enable the Function

  1. Navigate to Voxel Toolkit → Functions in your WordPress admin
  2. Find Show Field Description in the list
  3. Toggle the switch to enable the function
  4. Click Save Changes

Step 2: Add Field Descriptions in Voxel

Ensure your Voxel post type fields have descriptions configured:

  1. Go to Voxel → Post Types
  2. Edit your post type
  3. Navigate to Fields
  4. Edit any field and add a description in the Description field
  5. Save your changes

Styling Options

Customize the appearance of field descriptions through Elementor:

In Create Post Widget

  1. Edit your page with Elementor
  2. Select the Create Post widget
  3. Go to the Style tab
  4. Find Fields → Fields General section
  5. Scroll to Field Description Style (VT)

Available Controls

ControlDescriptionDefault
Description ColorText color for descriptions#666666
Description TypographyFont family, size, weight, etc.0.9em, 400 weight
Description Margin TopSpace above the description-5px
Description Margin BottomSpace below the description10px

Supported Widgets

Field descriptions are shown in:

  • Create Post Widget (ts-create-post): All post type submission forms
  • Login/Register Widget (ts-login): User authentication forms

Visual Comparison

Before (Default Voxel)

  • Field label with small info icon (ℹ️)
  • Description appears only when clicking the icon
  • Users may miss helpful information

After (With This Function)

  • Field label without info icon
  • Description text visible directly below the label
  • Users immediately see helpful guidance

Use Cases

Complex Forms

For forms with many fields, visible descriptions help users understand requirements without extra clicks.

Mobile Users

Mobile users benefit from visible descriptions since tooltip popups can be awkward on touch devices.

Accessibility

Screen readers can access visible descriptions more easily than tooltip content.

Troubleshooting

Descriptions Not Showing

  • Verify the field has a description configured in Voxel post type settings
  • Ensure the function is enabled in Voxel Toolkit → Functions
  • Check that you’re using a supported widget (Create Post or Login)
  • Clear any caching and refresh the page

Styling Not Applying

  • Make sure you’re editing the correct widget in Elementor
  • Look for the controls in the Style tab, under Field Description Style (VT)
  • Check for CSS conflicts with your theme

Tooltip Icons Still Showing

  • The function hides tooltips via CSS – check for CSS conflicts
  • Clear browser cache
  • Verify JavaScript is loading correctly

Built by Code Wattz.