[Resolved] Can I create a Tooltip from a Custom Field when I hover over a featured image?

[Author]

Posts

[CharleneD1435]

Tell us what you are trying to do?

I wish to create a tooltip containing images and html marked up tekst in a custom field when I hover over the featured image of a view.

Is there any documentation that you are following?

None that I could find relevant to what I'm trying to create.

Is there a similar example that we can see?

Yes but this page is not Toolset created however it does show nicely what I'm trying to recreate.

hidden link

If you hover over the skill images of the monsters you will see the tooltip. Now I have a custom post type called Skills, which has a featured image and I've created a view for this post type showing title and featured image. However now I wish to add a tooltip when I hover over the featured image that would show a custom field, or perhaps the post excerpt would do fine too.

However the tooltip will contain images and needs a nice layout for the information to be easily readable just like on the link I've shown.

What is the link to your site?

hidden link

There isn't much to be seen on the front end from the site though as I'm currently still setting it up and struggling with the needed functions.

My first intention was to use the image description field to create a tooltip, but I could not find any documentation or 3rd party plugin to make that possible so I am hoping that it's possible to do with toolset instead.

[Nigel]

Hi Charlene

You will need to create your own solution for such Tooltips, it is not something that is directly supported by Toolset.

However, to add tooltips it is typically just a question of outputting HTML in the required format (which you can do in the output of your View) and instantiating the tooltips with JavaScript.

Toolset is designed to work with Bootstrap (currently, version 3) which includes support for tooltips.

You can see what's required in their documentation: hidden link

I note there that there is an option to include support for HTML inside tooltips rather than just text.

If you didn't like the Bootstrap implementation there are alternatives that you could search for.

[CharleneD1435]

Hi Nigel!

Thanks for getting back to me, I read through the documentation on the link you send me but I have to admit it's a little above my programming expertise.

I've already tried using several different plugin's to create tooltips, among every one I could find I have to so say, and I've read almost 100 articles from how to make a tooltip with css till the bootstrap tooltip versions but I'm at a loss at figuring out of to implement them.

I have used the plugin wordpress tooltips to create tooltips from the alt description of images, but this was insufficient because the featured images alt description cannot contain html elements.

On your link it speaks about a plugin, but there's no plugin to be downloaded it's rather confusing I'm afraid.

If I used something like this in my vieuw would that work?

<div class="skillset" data-toggle="tooltip" data-placement="top" title="[shortcode custom field]">[shortcode featured image]</div>

I truly hope you can help me out with the vieuw because my entire site depends on this feature, without the tooltips I cannot make the site work and will have to abort the entire project and the worpdress tooltips plugin doesn't work with nested shortcode so I cannot show my custom field inside the tooltip that way.

[Nigel]

Hi Charlene

I did a quick test and found that if you add data-html=true so that HTML can be used inside the tooltip then, yes, you can provide the content of the title attribute (i.e. the tooltip content) using a shortcode, so you could insert a Toolset shortcode for a single field, for example, or for something more complex register a custom shortcode (or, you might create a View where you disable the wrapping div in the settings and have it output the desired markup, which could include fields from your post etc.)

[CharleneD1435]

Hi Nigel,

Thanks that already helped me into the correct direction so I put a little html into my skills vieuw but it's not exactly working as planned.
I have in my loop:
[wpv-post-link]
<div class="tooltips" data-toggle="tooltip" data-placement="top" data-html="true" title="[types field='tooltip'][/types]">[wpv-post-featured-image]</div>
However on the front end you can see absolutely nothing, even more strange the featured image field doesn't even show anymore.
You can see here: hidden link
In the webbrowser inspecion I do see the div being made, also the shortcode's output is being put in the html field
It shows up as:
<div class="tooltips" data-toggle="tooltip" data-placement="top" data-html="true" title="

<h2>Accurate Shot</h2>
<hr />
<p>2.9*{ATK} + 0.06*{Target MAX HP}</p>
<hr />

• Damage +5%
• Damage +5%
• Damage +5%
• Damage +5%
• Damage +10%

<p>“><img width=" 100"="" height="100" src="hidden link" alt="Amazon Dark Slot 1 Accurate Shot"><p></p></div>

I think I'm slowly getting there as all the content that is supposed to be there is there in the html inspection, just why isn't it showing?

Also a related question can I use wysiwyg editor as a field to create the tooltips or must I use plain html text?

I tested the method without the shortcode in the title=" " part like this:
<div id="tooltip" class="tooltips" width="100px" height="100px" data-toggle="tooltip" data-placement="top" data-html="true" title="This time without a shortcode in the tooltip">[wpv-post-featured-image]</div>

The tooltip works so the issue seems to be the shortcode or am I doing it incorrect?

[Nigel]

Hi Charlene

It took me quite a while to get this working. There are issues with HTML character encoding that prevent this from working where you provide the title with any Toolset shortcode.

You'll need to register a custom shortcode to essentially do the same as the Toolset shortcodes, namely to return the HTML which comes from the custom field that you specify.

So, go to Toolset > Settings > Custom Code and add a snippet to register a custom shortcode 'tooltip':

add_shortcode( 'tooltip', function( $atts = [] ){

    if ( isset($atts['field']) ) {
      global $post;
      $html = get_post_meta( $post->ID, 'wpcf-' . $atts['field'], true );
      return $html;
    }

});

Then on the pages where you want to use it, you will specify the title using this shortcode and the slug of the field that contains the HTML, e.g. (with the button from the Bootstrap docs):

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-html=true title="[tooltip field='html']">Tooltip on right</button>

Note how I specify that the field containing my HTML has a slug of 'html'.

Please try that, it should work.

[CharleneD1435]

Hi Nigel

Thanks again, yeah I realized it's a tricky situation we are indeed getting closer once more.
The tooltip does indeed work now on the featured image as I need it to, however it does not execute the html code.
It simply shows the raw html code from the field.

You can see it here: hidden link

I've followed your instructions to the letter and my shortcode is like this:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-html="true" title="[tooltip field='tooltip']">[wpv-post-featured-image]</button>

The field I use for the html code is called tooltip for me as that's the slug I use for the custom field. This is a Multiline field with raw html in it.

The snippet I made as to your instructions I called it html and it has in it:

<?php
/**
* New custom code snippet.
*/

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

add_shortcode( 'tooltip', function( $atts = [] ){

if ( isset($atts['field']) ) {
global $post;
$html = get_post_meta( $post->ID, 'wpcf-' . $atts['field'], true );
return $html;
}

});

It's activated and set to the setting to Always run.

If I made any mistakes or forgot anything please let me know

[Nigel]

It doesn't look like you have Bootstrap active on your site, and this is set to work with Bootstrap tooltips.

Check that Bootstrap is loaded at Toolset > Settings.

[CharleneD1435]

Hi Nigel,

Settings are set on Toolset should load Bootstrap 3.0 so I believe this is correct.
I'll disable my theme and other plugins for a moment to check for incompatibility issues.

[CharleneD1435]

I disabled all other plugins only toolset types and views are active, and I used the Astra theme which is recommended on your documentary as a theme but the problem remains.

The settings from the toolset plugin tells it to enable bootstrap 3.0 what else could keep the html from executing?

[Nigel]

OK, I can see on the front end that Bootstrap is now loaded, but nothing is happening with the tooltip.

I can't really tell what the problem is without looking at the back end, can I get access to your site?

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

The problem was simple, Bootstrap is loaded but the tooltips require instantiating in JS.

I added the following to the custom JS of your View:

(function($) {
        $(document).ready(function() {

                $('[data-toggle="tooltip"]').tooltip();

        });
})(jQuery);

It seems to work okay now.

[CharleneD1435]

Thank you so much! That did the trick indeed.
I take it that I will have to add that code to all the vieuws I wish to use the tooltips in 🙂