Categories

(111)
(62)
(154)
(21)

The Field image tooltips Drupal module by InternetDevels developers

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

InternetDevels 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 a 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 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 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!

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

3

Today’s the day for our Drupal developer’s blog post again, which means a lot of...

4

E-commerce in Drupal 8 is a topic of interest for many developers. If you are among them, you’ve come to the right place — our...

5

A detailed blog post by our Drupal developer about using Drupal Composer template...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime