Created
April 1, 2020 18:49
-
-
Save wpmudev-sls/18d091567d5cf0c53cbf79cf2886cbd9 to your computer and use it in GitHub Desktop.
[Forminator Pro] - Show field descriptions as tooltips
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Plugin Name: [Forminator Pro] - Show field descriptions as tooltips | |
| * Plugin URI: https://premium.wpmudev.org/ | |
| * Description: Replace existing field descriptions and show them as tooltips with tippy.js (as of 1.12.1) | |
| * Author: Alessandro Kaounas @ WPMUDEV | |
| * Author URI: https://premium.wpmudev.org/ | |
| * Task: https://wordpress.org/support/topic/show-the-field-description-as-a-tooltip/ | |
| * License: GPLv2 or later | |
| */ | |
| if ( ! defined( 'ABSPATH' ) ) { | |
| exit; | |
| } | |
| // No need to do anything if the request is via WP-CLI. | |
| if ( defined( 'WP_CLI' ) && WP_CLI ) { | |
| return; | |
| } | |
| if ( ! class_exists( 'WPMUDEV_Forminator_Field_Descriptions_Tooltip' ) ) { | |
| class WPMUDEV_Forminator_Field_Descriptions_Tooltip { | |
| private static $_instance = null; | |
| public static function get_instance() { | |
| if( is_null( self::$_instance ) ){ | |
| self::$_instance = new WPMUDEV_Forminator_Field_Descriptions_Tooltip(); | |
| } | |
| return self::$_instance; | |
| } | |
| private function __construct() { | |
| $this->init(); | |
| } | |
| public function init(){ | |
| add_filter( 'forminator_field_markup', array( $this, 'wpmudev_forminator_field_markup' ), 10, 2 ); | |
| add_action( 'wp_footer', array( $this, 'wpmudev_forminator_tooltip_assets' ), 99 ); | |
| } | |
| public function wpmudev_forminator_field_markup( $html, $field ){ | |
| if( isset( $field['description'] ) && $field['type'] === 'phone' ){ | |
| $field_id = 'forminator-field-' . $field['element_id']; | |
| $description = $field['description']; | |
| $markup = sprintf( | |
| '<span class="forminator-description">%s</span>', | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( isset( $field['description'] ) && $field['type'] === 'textarea' ){ | |
| $field_id = 'forminator-field-' . $field['element_id']; | |
| $description = $field['description']; | |
| $markup = sprintf( | |
| '<span class="forminator-description">%s', | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '<span class="forminator-description">', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( isset( $field['description'] ) ){ | |
| $field_id = 'forminator-field-' . $field['element_id']; | |
| $description = $field['description']; | |
| $markup = sprintf( | |
| '<span class="forminator-description" aria-describedby="%s">%s</span>', | |
| $field_id, | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( isset( $field['fname'] ) && $field['fname'] ){ | |
| $field_id = 'forminator-field-first-' . $field['element_id']; | |
| $description = $field['fname_description']; | |
| $markup = sprintf( | |
| '<span class="forminator-description" aria-describedby="%s">%s</span>', | |
| $field_id, | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html ); | |
| } | |
| if( isset( $field['mname'] ) && $field['mname'] ){ | |
| $field_id = 'forminator-field-middle-' . $field['element_id']; | |
| $description = $field['mname_description']; | |
| $markup = sprintf( | |
| '<span class="forminator-description" aria-describedby="%s">%s</span>', | |
| $field_id, | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html ); | |
| } | |
| if( isset( $field['lname'] ) && $field['lname'] ){ | |
| $field_id = 'forminator-field-last-' . $field['element_id']; | |
| $description = $field['lname_description']; | |
| $markup = sprintf( | |
| '<span class="forminator-description" aria-describedby="%s">%s</span>', | |
| $field_id, | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html ); | |
| } | |
| return $html; | |
| } | |
| public function wpmudev_forminator_tooltip_assets(){ ?> | |
| <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/> | |
| <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> | |
| <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> | |
| <script type="text/javascript"> | |
| (function($){ | |
| tippy( | |
| // Selector | |
| 'input[data-tippy-content], textarea[data-tippy-content]', | |
| // Settings | |
| { | |
| arrow: false, | |
| trigger: 'focus', | |
| animation: 'fade' | |
| } | |
| ); | |
| })(jQuery); | |
| </script> | |
| <?php | |
| } | |
| } | |
| add_action( 'plugins_loaded', function(){ | |
| return WPMUDEV_Forminator_Field_Descriptions_Tooltip::get_instance(); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Doesn't appear to be working in v1.14.11. The assets get added to the page but the "description" is still visible and nothing happens on hover.
The description is added to the textarea but it also shows up after the textarea and no display happens in hovering over the text area. I'm pretty sure, however, I don't see Tippy in the events:
<div class="forminator-field forminator-has_error"><label for="forminator-field-textarea-8" class="forminator-label">Describe your relationship with your pastor or spiritual leader. What does he/she think about you wanting to attend the WIP school? <span class="forminator-required">*</span></label><textarea name="textarea-8" placeholder="" id="forminator-field-textarea-8" data-tippy-content="<ol><li>Please give the name, address, phone and email of your pastor/spiritual leader </li><li>The name address, phone and email of your DTS/Small group leader in YWAM </li></ol><p><br></p><p><br></p>" class="forminator-textarea" rows="6" style="min-height:140px;" aria-invalid="true"></textarea><span class="forminator-error-message" aria-hidden="true">This field is required.</span><span class="forminator-description"><ol><li>Please give the name, address, phone and email of your pastor/spiritual leader </li><li>The name address, phone and email of your DTS/Small group leader in YWAM </li></ol><p><br></p><p><br></p></span></div>