InternetDevels web developers working at JYSK shop chain project, keep creating new Drupal modules for the community. In the previous blog post, you could check out the Gridstack field module. This time, we present the Field image tooltips module, which is also ready for Drupal 7 and Drupal 8. As it is our tradition, the author himself is going to introduce the module.
Some time ago, a team of InternetDevels developers — which is also part of a larger international JYSK project team — got an unusual and very interesting task. The project we are working on is a great multi-national online store, which also includes news, articles, and other pages of this kind. The customer asked us to create an opportunity for adding a large image of several products offered on the site, and mark the points (tooltips) on the image that shoppers could click on to see all the information about a certain product, or add this product to their cart.
The Field image tooltips Drupal module
Looking for a solution to this task, the developers reviewed the list of the Drupal modules and jQuery plugins already in existence. Having found nothing that would come in handy in creating this functionality, the developers started building their own solution. This is how the Field image tooltips module was born.
Field image tooltips is a ready-made set of fields based on the Paragraphs Drupal module, which contains: a field for downloading the image to be shown to users with tooltip icons placed on it, a field for downloading the icon itself, and the Entity reference autocomplete field for attaching some content to the tooltip on the main image.
Using the Field image tooltips module
So, if you need to do something like this kind, perform these steps:
- Download and install the Field image tooltips module and all the required modules as you normally would.
- Go to your field settings of the desired content type and add a field of Paragraphs type to it.
- On the field settings page, in "Allowed Paragraphs bundles", select "Image with tooltips".
- Save the field settings and go to the new node creation.
- Set a name for the new material.
- Click on the "Add Image with tooltips" button.
- Download the icon image to be used as the tooltip on the main image.
- Download the main image.
- In the "Tooltips content" field, select the node you want to show when the user clicks on the tooltip.
- Using the mouse, relocate the tooltip on the main image.
- If you wish, add other tooltips.
- Save the content.
As a result, you will have a page like this:
Hopefully, the Field image tooltips Drupal module will be helpful to you!