[Solved] Need Tooltip for Vote Up and Vote Down Icons

@aerostar Please read this doc. You should copy the template part you want to customize and add some HTML to it.

Adding this attribute will automatically generate tooltip for the element

wpd-tooltip="Tooltip Text"

Vote buttons are located in /wp-content/plugins/wpdiscuz/themes/default/layouts/%LAYOUT_NUMBER%/vote.html template file.

@jacob,

We're not coders nor developers. We need something more practical.

Our affected file is: wp-content/plugins/wpdiscuz/themes/default/layouts/1/vote.html

The file contains the following:

<divclass="{VOTE_WRAPPER_CLASSES}">
<divclass="{VOTE_UP_CLASSES}">
        {VOTE_UP_ICON}
</div>
    {VOTE_RESULT}
<divclass="{VOTE_DOWN_CLASSES}">
        {VOTE_DOWN_ICON}
</div>
</div>

@aerostar,

Please see the example: 

<div class="{VOTE_WRAPPER_CLASSES}">
    <div class="{VOTE_UP_CLASSES}" wpd-tooltip="Tooltip Text">
        {VOTE_UP_ICON}
    </div>
    {VOTE_RESULT}
    <div class="{VOTE_DOWN_CLASSES}"  wpd-tooltip='Tooltip Text'>
        {VOTE_DOWN_ICON}
    </div>
</div>

The red marked part should be added to the file that you've pasted in the active theme folder.

@Asti,

Thank you so much! If you don't mind:

(1) Would it be possible to generate a filter that can accomplish the above (via functions.php file) instead of messing around with the child theme?

(2) What CSS code can we use to reduce the width of the tooltip box assigned the Vote Up and Vote Down elements? We found one, but it affects all tooltip box of the comments form. We're using the words "Like" and "Dislike" The tooltip boxes are way to big for these words.

Cheers!

@aerostar,

(1) Would it be possible to generate a filter that can accomplish the above (via functions.php file) instead of messing around with the child theme?

If it's possible to do the customization the hook is not going to be added. 

(2) What CSS code can we use to reduce the width of the tooltip box assigned the Vote Up and Vote Down elements? We found one, but it affects all tooltip box of the comments form. We're using the words "Like" and "Dislike" The tooltip boxes are way to big for these words.

Sure, please provide us with some example URL. We'll help you with the CSS code. 

@Asti,

Again, thank you!

As requested, here's the sample URL: https://www.omniaaerospace.com/blog/why-atc-privatization-is-wrong/#comments

Looking forward to your CSS code. We tried everything without being able to able to identify the proper CSS selectors.

Cheers!

PS: One last thing ... can you increase the allowable time for editing comments to 8-10 minutes? Whatever your current setting is, it's too short (in our opinion). Thank you.

@aerostar,

Looking forward to your CSS code. We tried everything without being able to able to identify the proper CSS selectors.

Here it's: 

#wpd-threads .wpd-vote [wpd-tooltip]::after {
   margin-left: 0px !important;
   padding: 5px 0px !important;
   min-width: 4vw !important;
} 

PS: One last thing ... can you increase the allowable time for editing comments to 8-10 minutes? Whatever your current setting is, it's too short (in our opinion). 

Thank you. We'll discuss with out team and change it if it's necessary. 

@Asti,

You're a genius! Thank you.

We made some minor adjustments to make sure the tooltips are not truncated when viewed on mobile devices. Details below.

Again, thanks a million.

Cheers!

--------------------------

For Standard Desktop Screens:

#wpd-threads .wpd-vote [wpd-tooltip]::after {
     margin-left: 0px !important;
     padding: 5px 0px !important;
     min-width: 4vw !important;
}

 For Mobile Device Screens:

@media only screen and (max-width: 640px) {
     #wpd-threads .wpd-vote [wpd-tooltip]::after {
     margin-left: 9px !important;
     padding: 5px 8px !important;
     min-width: 4vw !important;}
}

This particular CSS Code is for the Comment Link located on the right side of comment form:

@media only screen and (max-width: 640px) {
      #wpd-threads .wpd-comment-link [wpd-tooltip]::after {
      left:-185%!important;
      margin-left:0px!important;}
}