[Resolved] Adapting my custom tooltip field, to a custom tooltip view?

[Author]

Posts

[CharleneD1435]

This is a follow up question for Nigel,

We've created a tooltip with a bit of custom coding and bootstrap 3.0 data toggle.
Now in our last conversation you mentioned something about also being able to create tooltips from views instead of 1 single custom field? However if I change the slug that directs to the custom field into the slug of the view I wish to use as a tooltip nothing shows.

Could you help me out with this one last time?

I figured I would need to adjust the added custom code to work with a view shortcode instead of a field

So I've tried to add a new snippet:

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

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

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

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

});

Where I have changed field into view and wpcf into wpv, not sure if this is correct though.

My shortcode:

<div id="skill-tooltip" data-toggle="tooltip" data-placement="right" data-container="body" data-html="true" title="[tooltip field='tooltip']">[wpv-post-featured-image size="custom" width="50" height="50"]<br>

I've tried to change tooltip field to tooltip view, or tooltipview view="tooltipview" but neither of it worked. I'm sure I'm just missing something so I was hoping you could help me figure it out.

Thanks in advance!

[Nigel]

Hi Charlene

Before we were setting the value of a custom field as the title attribute that is used to generate the tooltip content.

Now you want to do the same but instead of coming from a custom field, the content should be the output of a View, is that right?

I recall that the reason we had to register a custom shortcode before was because of character encoding issues.

I don't know if that would be the same when outputting a View.

So the first thing to try would be to replace the tooltip shortcode we created and use the wpv-view shortcode in its place to provide the title attribute content, e.g.

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

(You might want to edit the View and choose to disable the wrapper div for the output of this particular View.)

Does it work?

If not then we are back to using a custom shortcode, but check that first and let me know.

[CharleneD1435]

Hi Nigel,
Thanks for getting back to me so fast.
I tested the instructions you gave me, but if only it were that simple haha.
hidden link
I left the results exactly as they are now with the shortcode being

<div id="skill-tooltip" data-toggle="tooltip" data-placement="right" data-container="body" data-html="true" title="[wpv-view name='tooltipview']">[wpv-post-featured-image size="custom" width="50" height="50"]<br>
</div>

However the result is that it breaks the entire view, the featured image no longer is shown and the tooltip shows No items found "> so it seems to me like it's the same problem we had before.

[Nigel]

I'm not so sure it is the same issue, as the No items found suggests your View is returning no results (which is where the No items found message comes from).

Could I get credentials from you and take a look?

This is a dev server, right? So I can make a few minor test changes?

[Nigel]

Hi Charlene

It seems you have a little work to do tidying this up before worrying about getting the tooltips to work.

For now I placed a simple string in the title attribute, so that we know it is not breaking anything.

I also replaced the "No items found" message in your effects View with "No effects" to make it clear which View was outputting that string.

If you look again at the page, I don't think it is outputting what you want/expect.

Take another look at how you have nested your Views (the effects View is added to the monsters archive View and again to the skills View).

Where you have inserted Query Filters for related posts, you don't specify the relationship, and where you have multiple relationships I'd recommend specifying the relationship, unless it makes sense not to.

When you've done that and everything looks how it is supposed to (minus the tooltip) then let me know and I'll look again.

[CharleneD1435]

Hi Nigel,

That is actually correct i did that on purpose because on a different ticket I was asking how to show "effects" as a grandchild from monsters per monster rather than per skill.

Luo answered this ticket today and explained to me that there is no possibility to show effects in a Monsters Archive view because Effects has no direct relationship with Monsters. It seems I cannot show grandchildren only children?

The hierarchy is that the Monsters have skills and these skills have effects. However while making the archive view I realised I prefer to show a grid of 4 columns just showing the effects featured image rather per Monster instead of per skill. So I was trying to add this to my monsters view without succes unfortunately. This is why the effects view has been added to both the monsters view and the skills view.

I have removed the effects view from the skills view now and left it for the time being in the Monster view but probably I will have to set a new relationship Monster > Effect for this to work.

This shoudn't impact the tooltipview though which I wish to use as tooltip. I do hope I set that view up properly, I find the views still pretty tricky especially with the relationships, perhaps a feature suggestion for the future that it would help to have some sort of a preview to see what the view actually puts out. Right now it's a lot of guesswork as to how to set them up correctly despite having read all the tutorials on the website.

If you could have another look though at the tooltipview? I believe I've set everything up correctly now.

[Nigel]

Hi Charlene,

let's come back to the grandchild etc. issues later and deal with the tooltips first.

So, your View "skills" queries skill and leader skills posts, so the output section would be iterating over posts of either type.

And in the output section you output the featured image for that skill/leader-skill, which is where you use the tooltip.

Now, you have prepared the View "TooltipView" for the content you want to appear in the tooltip.

That View queries skill posts (but not leader skills), and includes a query filter to show posts related to the post where this view is shown.

But the post where this View is shown is a skill post.

Do you mean that the View should be outputting content for the actual post where you insert it (i.e. the skill from the first View) and you simply want this second View to be showing fields from the same skill post?

In which case you don't want a View, you just need a Content Template to act as a container for the markup and fields you want to output.

You don't need to make a new one, because the View already created one called "Loop item in TooltipView".

So you should be able to delete the View, and insert that template for your tooltip.

Do you want to give that a try?

[CharleneD1435]

Hi Nigel!

That worked 😀 that was indeed what I was trying to do.
To show a combination of fields from the skills / leaderskills post.
Now thanks to your solution the leaderskills also show their tooltips briljant 🙂

So now that we've figured that out, when am I supposed to use a view and when am I supposed to use a content template?
Aren't they both just a combination of fields?

[Nigel]

No.

A content template is a container for a block of HTML, which can include shortcodes. By default those shortcodes will use the "current post" as their source.

If you inserted a content template directly into a page or a post, and visited the page or post, then that page or post would be the source for any shortcodes included in the template.

You can overwrite that for individual shortcodes within the template by adding an item attribute that will point to a different post to use as source, or you can add such an attribute to the shortcode used to insert the content template, which will override the source for all shortcodes within the template.

Now, the most common use-case with content templates is to *assign* such a template to a post type, so that a template assigned to the Monster post type would be used when displaying all single Monster posts (and the Monster post being visited would be the source of the shortcodes within the template).

But you don't have to assign the template to a post type, you can use it wherever, and the most common use-case for *that* is to use a content template to gather together the markup and fields for each post output by a View (and the UI of the View helpfully shows the linked template in-place, rather than you having to go to Toolset > Content Templates to edit it).

So, what's a View?

A View has two parts, a query part, and a presentation part.

A View queries the database to return a list of (typically) posts, subject to whatever settings and filters you apply. It then iterates over the returned list of posts and outputs whatever you put between the wpv-loop tags for each post in the list. For simple Views you might put a shortcode or two directly in this output editor, but for more complex Views you will normally—via the Loop Wizard—opt to group the shortcodes and extra markup in a linked content template.

Now, to give a little guidance about displaying grandchild fields, if you have a View to show Monsters, then it is going to return a list of monster posts and iterate over them.

If you insert a View to display Skills in the loop section of the first View (and include a Query Filter to only show the skills of the current monster in the loop of the outer View) then that will iterate over each of the skills connected to the parent monster.

Logically, I would then expect you to add an Effects View in the output section of the skills View, so that for each skill it would list fields of the related effect.

So you end up with something like

Monster 1
-- Skill A
---- Effect alpha
---- Effect beta
-- Skill B
---- Effect gamma
-- Skill C
---- Effect delta
Monster 2
etc.

Does that kind of format work, or do you need something different?

[CharleneD1435]

Hi Nigel,
Thanks for the explenation now it does indeed make more sense to me.

The mark-up you mentioned is what I have used for the tooltips to show the effects per skill.

However what I was trying to achieve in the archive was to make a markup like

Monster 1
All connected Effects
All connected Skills

I was hoping this would be possible because than I could use a horizontal grid showing small featured images of the effects, with a Vertical List underneath with the skills.

I didn't want to show each effect per skill, rather a overview of all effects connected to the monster.

[Nigel]

Well the effects are connected to skills which are connected to monsters.

So you can display a list of effects which are grandchildren of a monster, but it must be through skills, meaning that they will be grouped by skills (even if you don't show the skills) and that if some effects are children of more than one skill then you could get duplicates.

So for

Monster1
All connected Effects
All connected Skills

you would implement that as

Monster template (or View listing Monsters)
View to list child skills -> View to list child effects (only output fields in the effects View, the skills View is just to bridge monsters to effects)
View to list child skills (this View will output the skills fields as required)

[CharleneD1435]

Awesome Nigel you're my hero!

Luo said it couldn't be done in my other ticket so I had already given up hope.
But thanks to your description I managed to make a 2nd skills view, with the featured images of only the effects in place and it works like a charm exactly what I wanted.

So now I have 1 more question, concearning the tooltip template.
In this template I am using a view for showing the harmfull effect related to a skill. With this I'm showing 2 fields from the intermediary post harmfull effect skill duration and harmfull effect chance.

Now I'd like to place a conditional around these fields so that they only are shown when the fields duration and chance are filled out.

You see now it shows for each skill:
featured image of the harmfull effect
Title of harmfull effect
Duration: value of the field Turns - value of the field % Chance.

Which is great exactly what I needed but on a 2nd skill there is no duration or % set so I'd like to only show the those two fields when they are in fact not empty.

Now I was experimenting with the conditionals already and had tried to place the shortcode

[wpv-conditional if="( $(wpcf-harmfull_duration) ne '" "' )"] Duration: [types field='harmfull_duration' format='FIELD_VALUE' item='@skill-harmfull-effect.intermediary'][/types][/wpv-conditional] Turns - [wpv-conditional if="( $(wpcf-harmfull_chance) ne '" "' )"][types field='harmfull_chance' format='FIELD_VALUE' item='@skill-harmfull-effect.intermediary'][/types] % Chance[/wpv-conditional]

Only the problem with the result is that even when the fields are filled out they are not shown.

About the fields, they are intermediary fields and are set to numbers. So what am I doing wrong? I think I grasped the concept of the conditionals, or do they not work on intermediary fields?

If you wish to take a look the logins are still active, and it's the harmfull effects view I'm using.

[Nigel]

Hi Charlene

I looked at your site and I wasn't sure of a skill I could check with a harmful effect where there were actual values set for the duration and chance intermediate fields.

So I tried to edit one to set values, so I could test they would be output as expected by the Types fields, but I found I couldn't.

I edited Fire Arrow and used the quick edit button in its relationship with Continuous Damage to try and set the field values, but they didn't save.

So,

Q1 is do you experience the same? and

Q2 is do you have a specific example where the intermediate post fields already have values set that I can check? (And where on the front end can I see it, i.e. which Monster has those skills and effects?)

[CharleneD1435]

Hi Nigel,

So sorry, yes I have only set the effect duration for the first Monster.
Amazon Dark, has it's value fully set. On the 2nd skill it should say, Unrecoverable Duration 2 turns 40% Chance.
Currently the conditional shortcode I was testing had completely hidden the Duration and Chance so it says only: Unrecoverable.
That's the skill I use to test my conditional shortcode. I have currently removed the Conditional shortcode so you can see the result. You can compare the skills from Amazon Dark and Amazon Fire to see the results.
Amazon Dark has value's set whereas Amazon Fire has only an Effect without values set.

The view being used to display these effects is the harmfull effects view, which is being called upon in the tooltipview template to show on the front end.

Hope that clarifies it 🙂

[Nigel]

Sorry Charlene, I ran out of road today, I'll look again Monday morning.