How to Create Clickable Image Overlays


Are you an organization with multiple locations? Here's how to make a custom map to showcase more information about your business on your map feature.

How to Create Clickable Image Overlays

Whether you have multiple business locations and would like to display them on a customized map or create an interactive infographic that lets users click on certain points on an image, you can do that easily with Bootstrap.

How to create clickable overlays for your images

There's a feature that comes with Bootstrap called Popovers, and in this tutorial, we'll show how to use popovers to create interactive maps. While you can use any image (i.e. infographic, photograph) for this, we're using a map. Maps are one of the best features business websites can add; they establish authority and brand recognition. 

First, we start by adding Popper.js to our html file:

Keep in mind that we need to put popper.js before bootstrap.js otherwise, it will not work. Next, we enable popovers using Javascript. There are two ways to enable popovers.

One way to initialize popovers is by selecting them by their data-toggle attribute:

If you have some styles that may interfere with a popover, you specify a custom container so that the popovers initialize inside that element only:

Next, we create our html map with locations:

HTML

class

We specify a different class name for each location on the html file so that we can refer to them on our CSS file and specify a different horizontal and vertical alignment for each location. 

data-content

This is the content value inside our popover.

data-placement

With the data-placement attribute, you can choose where you want the popover to appear in relation to its element. You can place them on the top, right, bottom or left side of an element.

data-toggle

In order to activate the popover feature, we need to set the data-toggle attribute to "popover." 

data-trigger

Using the data-trigger with a focus value will display the popover when a user clicks on an element and close the popover when the user clicks on a different element.

title

Sets the title for the popover. If you don't wish to put a title, you can leave it blank.

CSS

Javascript

Author

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.