Categories

(83)
(69)
(8)
(34)
(74)
(149)

The Field image tooltips Drupal module by InternetDevels developers

13.12.2016
The Field image tooltips Drupal module by InternetDevels developers
Author:

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.

The Field image tooltips Drupal module by InternetDevels developers

  • On the field settings page, in "Allowed Paragraphs bundles", select "Image with tooltips".

The Field image tooltips Drupal module by InternetDevels developers

  • 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.

The Field image tooltips Drupal module by InternetDevels developers

  • If you wish, add other tooltips.
  • Save the content.

As a result, you will have a page like this:

The Field image tooltips Drupal module by InternetDevels developers

Hopefully, the Field image tooltips Drupal module will be helpful to you!

8 votes, Rating: 5

Read also

1

Today is the day for the double profit. There is a useful Drupal module created by the InternetDevels developers who are working at the JYSK project. And, tell you more about it, one of the module...

2

Here goes another Drupal 8 post by one of our Drupal developers! Having enjoyed in-depth overviews of building Drupal 8 modules, theming, configuration, creating pop-ups, using Twig, and working...

3

Sometimes duets may sound even more impressive than solo performers. So meet the Drupal and AngularJS duet! The “music” these two produce together is the harmony of backend and frontend in...

4

Being strong, secure, and flexible is exactly what the doctor ordered for any good site! That’s why Drupal is a healthy idea for health care websites as well. Today, we’ve picked some of these...

5

Today’s the day for our Drupal developer’s blog post again, which means a lot of attention to detail and practical tips — this time on caching in Drupal 7. We have posts about creating CTools...

Subscribe to our blog updates