Skip Navigation

[Resolved] want to add hover with custom field into to a view image

This thread is resolved. Here is a description of the problem and solution.

Problem:

I am working on a Team section for a website using Toolset CPT and Views. I need to add functionality where, upon hovering over team member images, further information about the member is displayed in an overlay. The current hover options seem insufficient for this need.

Solution:

Option 1:

Use Kadence Modal Block:

https://toolset.com/2021/09/3-dynamic-designs-using-kadence-blocks-to-inspire-your-website/#kadence-modal-block

Option 2:

Use Fields and Text block in Toolset and incorporate the Bootstrap modal code:

https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

https://toolset.com/forums/topic/opening-a-form-with-a-button-in-a-modal-with-view-block-editor/#post-2417381

You can add dynamic Toolset data inside the HTML code using the buttons available in the Fields and Text block or manually using the shortcode reference:

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

Relevant Documentation:

https://toolset.com/2021/09/3-dynamic-designs-using-kadence-blocks-to-inspire-your-website/#kadence-modal-block

https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

https://toolset.com/forums/topic/opening-a-form-with-a-button-in-a-modal-with-view-block-editor/#post-2417381

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

This support ticket is created 2 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by helenG 2 years, 1 month ago.

Assisted by: Christopher Amirian.

Author
Posts
#2601709

Tell us what you are trying to do?
I need to create a Team section for a website. I could use a Toolset CPT and Views. BUT the client wants a lot more functionality/styling than I can find in Views. They would like to have a Team display with images of the Team members that when the user hovers over them, they will see in an over lay, further information about the Team member. Any idea how I could add that function to a view? Current hover options are primitive.

Is there any documentation that you are following?
I can find nothing current on Toolset site

hidden link

#2601785

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

There is no built-in feature for that. Upon searching I have found this article that might be helpful which utilizes the Kadence Modal Block:

https://toolset.com/2021/09/3-dynamic-designs-using-kadence-blocks-to-inspire-your-website/#kadence-modal-block

One other solution can be using the Fields and Text blick in Toolset and utilizing the Bootstrap modal code there:

hidden link

https://toolset.com/forums/topic/opening-a-form-with-a-button-in-a-modal-with-view-block-editor/#post-2417381

You will be able to add the dynamic Toolset data inside the HTML code using the buttons available for you in the Fields and Text block or you can add the dynamic data manually using the shortcode reference:

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

Thanks.

#2603045

Thank you Christopher. Your suggestion of a modal makes complete sense. I will be trying this out soon.