Last active
December 25, 2023 08:41
-
-
Save wpmudev-sls/9785a414467ee079ff1434d7bc8b6680 to your computer and use it in GitHub Desktop.
[Forminator Pro] - Show field descriptions as tooltip
This file contains 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 tooltip | |
| * Plugin URI: https://premium.wpmudev.org/ | |
| * Description: Replace existing field descriptions and show them as tooltips with custom script (as of 1.12.1) | |
| * Author: Prashant Singh @ WPMUDEV | |
| * Author URI: https://premium.wpmudev.org/ | |
| * Task: SLS-2705 | |
| * 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_Tooltips' ) ) { | |
| class WPMUDEV_Forminator_Field_Descriptions_Tooltips { | |
| private static $_instance = null; | |
| public static function get_instance() { | |
| if( is_null( self::$_instance ) ){ | |
| self::$_instance = new WPMUDEV_Forminator_Field_Descriptions_Tooltips(); | |
| } | |
| return self::$_instance; | |
| } | |
| private function __construct() { | |
| $this->init(); | |
| } | |
| public function init(){ | |
| add_filter( 'forminator_field_markup', array( $this, 'wpmudev_forminator_field_markups' ), 10, 3 ); | |
| add_action( 'wp_footer', array( $this, 'wpmudev_forminator_tooltips_assets' ), 9999 ); | |
| } | |
| public function wpmudev_forminator_field_markups( $html, $field, $field_cls ){ | |
| if( ! empty( $field['description'] ) && $field['type'] === 'phone' ){ | |
| $field_id = 'forminator-field-' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $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-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( ! empty( $field['description'] ) && $field['type'] === 'textarea' ){ | |
| $field_id = 'forminator-field-' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $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-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( ! empty( $field['description'] ) && $field['type'] === 'radio' ){ | |
| $description = $field['description']; | |
| $field_id = 'forminator-radiogroup-'.Forminator_CForm_Front::$uid.'-description'; | |
| $markup = sprintf( | |
| '<span id="'.$field_id.'" class="forminator-description">%s</span>', | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'class="forminator-field"', 'class="forminator-field" data-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( ! empty( $field['description'] ) && $field['type'] === 'select' ) { | |
| $field_id = 'forminator-form-6__field--' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $description = $field['description']; | |
| $markup = sprintf( | |
| '<span id="'.$field_id.'-description" class="forminator-description">%s</span>', | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( ! empty( $field['description'] ) && $field['type'] === 'checkbox' ) { | |
| $field_id = 'forminator-field-' . $field['element_id']. '-' .Forminator_CForm_Front::$uid; | |
| $description = $field['description']; | |
| $markup = sprintf( | |
| '<span id="'.$field_id.'-description" class="forminator-description">%s</span>', | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'class="forminator-field"', 'class="forminator-field" data-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( ! empty( $field['description'] ) ){ | |
| $field_id = 'forminator-field-' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $description = $field['description']; | |
| $markup = sprintf( | |
| '<span id="'.$field_id.'-description" class="forminator-description">%s</span>', | |
| esc_html( $description ) | |
| ); | |
| $html = str_replace( $markup, '', $html ); | |
| $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| return $html; | |
| } | |
| if( isset( $field['fname'] ) && $field['fname'] ){ | |
| $field_id = 'forminator-field-first-' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $description = !empty( $field['fname_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-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| } | |
| if( isset( $field['mname'] ) && $field['mname'] ){ | |
| $field_id = 'forminator-field-middle-' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $description = !empty($field['mname_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-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| } | |
| if( isset( $field['lname'] ) && $field['lname'] ){ | |
| $field_id = 'forminator-field-last-' . $field['element_id']. '_' .Forminator_CForm_Front::$uid; | |
| $description = !empty($field['lname_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-tooltip-content="' . esc_html( $description ) . '" ', $html ); | |
| } | |
| return $html; | |
| } | |
| public function wpmudev_forminator_tooltips_assets(){ ?> | |
| <script type="text/javascript"> | |
| (function($){ | |
| $( 'select[data-tooltip-content], input[data-tooltip-content], textarea[data-tooltip-content]' ).each( function() { | |
| var tip = $(this).attr( 'data-tooltip-content' ); | |
| $( this ).parent().find( '.forminator-label' ).append( '<div class="tool-tip"><i class="tool-tip__icon">i</i><p class="tool-tip__info"><span class="info">'+tip+'</span></p></div>' ); | |
| }); | |
| $( '.forminator-radio' ).parent().each( function() { | |
| var tip = $(this).attr( 'data-tooltip-content' ); | |
| if ( tip ) { | |
| $( this ).parent().find('span:first').append( '<div class="tool-tip"><i class="tool-tip__icon">i</i><p class="tool-tip__info"><span class="info">'+tip+'</span></p></div>' ); | |
| } | |
| }); | |
| $( '.forminator-checkbox' ).parent().each( function() { | |
| var tip = $(this).attr( 'data-tooltip-content' ); | |
| if ( tip ) { | |
| $( this ).parent().find('h4:first').append( '<div class="tool-tip"><i class="tool-tip__icon">i</i><p class="tool-tip__info"><span class="info">'+tip+'</span></p></div>' ); | |
| } | |
| }); | |
| $( document ).on( 'mouseenter', '.tool-tip__icon', function() { | |
| $( this ).parent().find( '.tool-tip__info' ).show(); | |
| }); | |
| $( document ).on( 'mouseout', '.forminator-label', function() { | |
| $( this ).parent().find( '.tool-tip__info' ).hide(); | |
| }); | |
| })(jQuery); | |
| </script> | |
| <style> | |
| .tool-tip__info{ | |
| display:none; | |
| } | |
| i.tool-tip__icon { | |
| background: #27b1f0; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-style: italic; | |
| font-family: times new roman; | |
| height: 20px; | |
| text-align: center; | |
| width: 20px; | |
| margin: 5px 5px; | |
| color: #fff; | |
| } | |
| .tool-tip { | |
| display: inline-block; | |
| position: relative; | |
| margin-left: 0.5em; | |
| } | |
| .tool-tip .tool-tip__info { | |
| display: none; | |
| background: #262626; | |
| border-radius: 3px; | |
| font-size: 0.875em; | |
| padding: 1em; | |
| position: absolute; | |
| left: 30px; | |
| top: -20px; | |
| width: 250px; | |
| z-index: 2; | |
| } | |
| .tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after { | |
| content: ""; | |
| position: absolute; | |
| left: -10px; | |
| top: 7px; | |
| border-style: solid; | |
| border-width: 10px 10px 10px 0; | |
| border-color: transparent; | |
| } | |
| .tool-tip .tool-tip__info:after { | |
| left: -8px; | |
| border-right-color: #262626; | |
| } | |
| .tool-tip .tool-tip__info .info { | |
| display: block; | |
| color: #fff; | |
| } | |
| .tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info { | |
| display: inline-block; | |
| } | |
| </style> | |
| <?php | |
| } | |
| } | |
| add_action( 'plugins_loaded', function(){ | |
| return WPMUDEV_Forminator_Field_Descriptions_Tooltips::get_instance(); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment