points of interest
July 30, 2014 | 47 Feedbacks

Points of Interest

Use this resource to highlight the points of interest of your products. Just a click to open a brief description of each point, allowing your user to get a deep and fast understanding of your product features.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Let’s say you want to showcase the best features of your new app, and you want users to learn what your app is capable of right from the design screens. A possible approach is by using points of interest, accordingly distributed over the design preview. The main advantage is that people will get familiar with some of your product features even before starting to use them. A great example is the Disqus Websites page.

Creating the structure

The structure for our interest points is an unordered list inserted inside our image wrapper:

Adding style

First, we assigned a position to each .cd-single-point list item:

We used percentage (rather than px) so that the points of interest preserve their position irrespective of the screen size.

For the pulse effect, we  created an ::after pseudo element for each .cd-single-point list item and animated its box-shadow and scale value using a CSS3 animation. We set the animation-iteration-count to infinite so that the animation is played continuously.

In order to show the info about the interest point (.cd-more-info element), we add the .is-open class to the .cd-single-point item when it’s clicked (using jQuery).
On mobile phone devices (screen width< 600px), the .cd-more-info element is opened as a full screen view (with a smooth scale effect achieved adding a CSS3 transition to the scale property).
On larger screens, instead, we set a fixed width and height for the .cd-more-info element. We also defined 4 classes (.cd-top, .cd-bottom, .cd-left and .cd-right) that have to be assigned to the .cd-more-info element in order to open it, respectively, on top, bottom, left or right of the .cd-single-point list item.

Events handling

We used jQuery to listen to the click events on the .cd-single-point list items and add/remove the is-open class consequently.


Nov 10, 2014
  • bug fixed on iOS8: replaced :nth-child(n) with :nth-of-type(n)
Oct 16, 2014
  • bug fixed: clicking on 2nd point will negate view history for 1st - by CodyHouse
July 30, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • calvin

    is this responsive?…or does it have to fit into a fixed width container in order to maintain point positions

    • Claudia Romano

      Hi Calvin, it’s responsive (that’s way we used percentage rather than px to position the points inside the image).

  • http://at80.co/ AT80

    Very nice Thanks!!

  • sina

    hi, it is brilliant
    is it possible to have the highlighted points after click? It seems after click on points, it became to cross and remain like that and never back to it last beeping style…

    • Claudia Romano

      Hi Sina. Yes you can! After the first click, we add the .visited class to the .cd-single-point item element. So what you have to do is just comment the code inside this class (in the .css file):

      Hope this helps! :)

      • sina

        Tanx :)…
        It was exactly what I said.. it was totally helpful

  • Antarik Mukherjee

    thank you sooooooo much for last two months i have been scavenging the Internet for annotation plugin , i was already halfway building one myself but this is way better thank you again :) :)

  • http://www.amazingthings.in/ Aakash Doshi

    Brilliant! Thanks :)

  • Antonio Junior


  • http://viii.in Vinay Raghu

    This is an example of how one can take a simple problem and provide a simple solution that works best for all cases. I think this is brilliant…thank you :)

  • Osaze Osoba

    Hi Claudia,

    Thanks for this great script!

    I’m trying to use it on my WordPress website, but when I click on the buttons, nothing happens… Any ideas why?

    Thank you once again.

    • Claudia Romano

      Hi, I have checked your website and it seems to work just fine! Really nice integration, btw! ;)

  • AlexS.A

    super nice

  • TsK

    Is it possible to add a hide/un-hide button for the points in the page?
    Later on – after un-hiding, next time users comes to the page it won’t be shown again (using cookie)

    • Claudia Romano

      Yes, you can assign a

      to the points if the user selects the hide button. And use cookies to store that info.

  • User

    I’ll get it, but has anyone tried to activate the [ .cd-more-info ] containers by clicking on a separate link? Testing applying the .is-open class to the [ .cd-single-point ] with another on click in the jQuery – but hot a wall. Any ideas? THANKS!

  • Rasmus Schmidt

    Great script! I was wondering if it’s possible to add this piece code, thus I can use it on images posted on my blog (wordpress). I’m posting magazine-like covers as my blog posts, and I would like the ability to add notes on the images, so the reading experience is equally as good on the smaller devices, as on a 27 inch screen.

    So my question is basically: Can I in any way make this work with dynamic content – through WordPress?

    • http://codyhouse.co Claudia Romano

      Hi Rasmus, glad you like it. Sure you can use this script with dynamic content – you need to replace the static html with your new content. But of course the retrieving function depends on your database structure.

  • salmen

    It’s possibile to create a shoppable image plugin with this technique ? what is the best solution to place the points on random images ?

  • Abdelrahman Mohsen

    how can users create / add new points ?

    • http://codyhouse.co Claudia Romano

      In the html, each .cd-single-point is a new point. You need to add it in the html and set its left/right and top/bottom position in the css.

      • Abdelrahman Mohsen

        Thanks :)

  • Toaitrantien

    Hello Claudia,

    Thank you for your useful tips. Can you please point me out if there’s a way that user can click on image and we can get the position by percentage of that point on the image?.


    • http://codyhouse.co Claudia Romano

      Hi, you can use event.pageX and event.pageY to retrieve the position of mouse relative to the left/top edge of the document (and subtract image left/top offset to that). Hope this helps!

      • Toaitrantien


        I have found this one http://jsfiddle.net/davidThomas/DGbT3/ , so X & Y should be the percentage now or we need to re-calculte to get percentage?. Sorry im not so good at js.

        Thank you! :)

        • http://codyhouse.co Claudia Romano

          They are the image offset values (top and left).

          • Toaitrantien

            Thank you,

            I have another question, i would like to add new css effect, not only pulse, can you please give me some keyword to research about these kind of effects that suitable for this jquery?

            Thank you again!

          • http://codyhouse.co Claudia Romano

            The pulse effect is css only, so you can play around with the keyframes (no js needed)!

  • Ben Pattison

    Hi, is there a way to close the window when you click elsewhere on the page?

    • http://codyhouse.co Claudia Romano

      Hi Ben, you can detect the click and remove the .is-open class (and add the .visited class) from the open list item. Hope this helps!

      • piccantenzmoderator

        Ciao Claudia, love this, really great work. My javascript is terrible, would you be so kind as to tell me how to remove the .is-open class onclick outside the open window? Grazie mille!

        • http://codyhouse.co Claudia Romano

          Ciao! You can try something like:

          Hope this helps!

          • piccantenzmoderator

            Grazie di nuovo, Claudia! I’ll try it and let you know how I go!

  • Jack Casey

    Hi I have 2 questions about this plugin:

    a) Can you place points other than using the nth-of-child method? My website has 6 divs, within each div are about 6 points. Any points that go after the first div take the position properties parallel to the first div. (I.E the third point in the second, third and fourth DIV is positioned the same as the third point in the first div.)

    b) Can the content of each point be made to its own unique size? (the cd-more-info class)


    • http://codyhouse.co Claudia Romano

      Hi Jack,
      a) you can add a class to each of your div and then use .div-class-name .cd-single-point:nth-of-type(n);
      b) same as a).
      Hope this helps!

      • Raquel Gonzalez

        Hi Claudia,

        Thank you for sharing this, it’s really helping me!

        I tried the solution provided above but it doesn’t work, instead the pulse animation is getting distorted and the tooltips remain the same.

        I added this to my CSS:
        width: 300px;
        height: 250px;

        I tried this (nothing happens):





        And I also tried this (pulsar gets distorted, and positions change):





        Could you tell me what I’m doing wrong? I want each tooltip for each image to have different dimensions, each image has around 6 tooltips and the info variates a lot.


  • Ty

    Pretty cool Claudia. Is it possible every time the page loads, ALL the points/balloons open to show the type and then the user has the option to click on each point to close it and to open it again individually? Would you be so kind to have a code example of this? Thank you in advance.

  • Mia

    Thanks for an awesome tutorial.

    Is there a way to keep the tooltip shape on small screen sizes instead of having it cover the entire page?

  • Christian Grann

    Is this function only for the mobile version or does it work on a normal page and is it possible to put them in on my own photos on my webpage and write my own content?

  • Tyler

    How I change the red point plus to an image? Instead of having the red plus sign, I want to have each point to have a different image.

  • Aunne Rouie Arzadon

    Is there a way for me to change the plus sign into a question mark

    • http://codyhouse.co Claudia Romano

      Hi, the plus sign is created using the ::after and ::before pseudo-elements of the .cd-single-point>a. You should try removing them and add a background image to the a element. Cheers!

  • True Bears Fan

    Hello Claudia – this is great, one question though. I have text in the box that appears when you click on the “+” that extends past the bottom of box. How to you get the box to increase in size based on the amount of text inside it so that the text stays within the box? I’m new to this and have tried everything to no avail…any help would be much appreciated!!!

    • True Bears Fan

      I found it…right in front of my nose, thank you :)

  • LG Web

    How can I close the single-point when clicking anywhere outside AND keep the .visited style? I can get it to close when clicked anywhere outside the box but the .visited style is applied to all points. Great tutorial by the way!