Tooltip for features in Price Table

Hello,

How can I add a Tooltip for features of "Compare Features" list in Price Table? I mean this one:

http://www.w3schools.com/css/css_tooltip.asp

Thank you!

  • Nithin

    Hi LUCAS FLEMING,

    Hope you are doing good today.

    This would require editing the plugin core files, other than that there isn't any quick workaround, you can add the following line, under /wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Checkout.php, ie edit the line 663

    Ie:
    return '<span class="icon-' . $status . '"></span>';

    And change the above line to:

    return '<span class="icon-' . $status . '"><span class="tooltiptext">Tooltip text</span></span> ';

    Once done, add the following CSS:

    .icon-tick, .icon-cross, .icon-none {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    
    .icon-tick .tooltiptext, .icon-cross .tooltiptext, .icon-none .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
    
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }
    
    .icon-tick:hover .tooltiptext, .icon-cross:hover .tooltiptext, .icon-none:hover .tooltiptext {
        visibility: visible;
    }

    This should make the tooltip appear, however you might have to customize it according to your themes style.

    You can add the above CSS code, using Custom CSS box(if your theme offers), or either using a Child theme, or a plugin like Simple Custom CSS.

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day.

    Kind Regards,
    Nithin

  • Nithin

    Hi LUCAS FLEMING,

    How can I add different Tooltip for every features?

    I'm afraid at the moment, this would require rewriting the code in the Checkout.php file, which was mentioned above. I'm pinging the developer regrading this, and will check whether we could have a quick workaround on this. Either myself, or the developer will keep you posted asap.

    Kind Regards,
    Nithin

  • Panos

    Hi LUCAS FLEMING ,

    As Nithin already mentioned, this would require some modification of that file and some additional work. If you find it hard to follow instructions bellow, you can send us ftp so we can do these modifications.

    In order to keep the file changes to a minimum, I would suggest the use of a custom shortcode. Instead of modifying line 663, you can change line 360 from
    $columns[ $col_count ]['features'][ $index ]['text'] = isset( $feature_table[ $feature_key ]['levels'][ $level ] ) ? $feature_table[ $feature_key ]['levels'][ $level ]['text'] : '';
    to
    $columns[ $col_count ]['features'][ $index ]['text'] = isset( $feature_table[ $feature_key ]['levels'][ $level ] ) ? $feature_table[ $feature_key ]['levels'][ $level ]['text'] . do_shortcode( '[wpmudev_ps_tooltip_text col_count="'.$col_count.'" feature_key="'.$feature_key.'" ]' ) : '';

    As you notice we added the shortcode [wpmudev_ps_tooltip_text] with some attributes. Now we need to add some functionality to it. In a mu-plugin ( for the mu-plugin you only need to create a php file in folder wp-content/mu-plugins. If this folder doesn't exist you can simply create it ) add the following snippet:

    function wpmudev_ps_tooltip_text_sh( $atts ){
    
    	$col_count = $atts['col_count'];
    	$feature_key = $atts['feature_key'];
    
    	$features = array();
    
    	$features['pay-to-blog'] = "Some text for Pay to Blog";
    	$features['custom-1'] = "Some text for Custom feature 1";	
    
    	return '<span class="tooltiptext">'.$features[$feature_key] . '</span>';
    }
    
    add_shortcode( 'wpmudev_ps_tooltip_text', 'wpmudev_ps_tooltip_text_sh' );

    What you need to change in the code in the mu-plugin is the $features array explained in the following paragraph.

    You can insert different text for each feature. If you have the Pay to Blog add-on then you can set as above example:
    $features['pay-to-blog'] = "Some text for Pay to Blog";

    For the rest of the custom features you insert you need to get their field id first. You can get that easily from the admin > Pro Sites > Pricing Tables page by right clicking on the number on the first column of the table and then on the "Inspect" option like in the screen shot:

    So according to the screenshot above, we need to add the following line:
    $features['custom-5'] = "Some text for Custom feature in the screenshot";

    I understand that this requires some modifications on your side, please let us know if you need further clarification or if would like to send us ftp so we can do it for you

  • Panos

    Hi John ,

    The process is similar with above.

    First in same file
    /wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Checkout.php
    change line 185 to:
    $content .= '<div class="feature-name">' . ProSites::filter_html( $feature['name'] ) . do_shortcode( '[wpmudev_ps_tooltip_text_on_main feature_index="'.$index.'" feature_name="'.$feature['name'].'" ]' ) . '</div>';

    Then in a mu-plugin you can add the following snippet:

    function wpmudev_ps_tooltip_text_on_main_sh( $atts ){
    
    	if( $atts['feature_name'] == '' ) return;
    
    	$features = array();
    
    	$features[] = 'Some text for first feature';
    	$features[] = 'Some text for second feature';
    	$features[] = 'Some text for third feature';
    
    	return '<span class="tooltiptext">' . $features[ $atts['feature_index'] ] . '</span>';
    
    }
    
    add_shortcode( 'wpmudev_ps_tooltip_text_on_main', 'wpmudev_ps_tooltip_text_on_main_sh' );

    What you need to change in the code is again the $features array. Make sure you add each feature's tool-tip text in the same order the features are displayed.

    Please let me know if you need further clarification on this

    Thanks!