2

I've just started using LinkedIn's Hopscotch to create a page tour for new users. It seems pretty simple to use, except all the elements seem to be out of alignment as shown in the image below. Any idea how to fix this issue?

Hopscotch

This is my js code:

var tour = {
    id: "hopscotch",
    showPrevButton: true,
    steps: [{
        title: "About Me",
        content: "This is the header of my page.",
        target: 'about_edit',
        placement: "bottom",
        xOffset: '-20'
        },
        {
        title: "About Me",
        content: "This is the header of my page.",
        target: 'work_edit',
        placement: "bottom"

    }]
};

// Start the tour!
hopscotch.startTour(tour);
samuei
  • 1,949
  • 1
  • 10
  • 26
Mitchell Weiss
  • 93
  • 1
  • 4
  • 9
  • We're going to need more code. A fiddle would be the best. – Itay Sep 03 '13 at 04:53
  • I wasnt able to get a fiddle going with hopscotch. If I use chrome tools I can get the '1' and the 'x' back to centre by modifying the hopscotch css. Im curious to know if anyone else has had the same issue as its pretty much straight out of the box – Mitchell Weiss Sep 03 '13 at 05:18

2 Answers2

3

Just ran into this today and found a workaround. I assume you're using Bootstrap.

If so, there are some styling conflicts. My fix is to override the Bootstrap box-sizing of border-box that is used on all elements:

.hopscotch-bubble-container *{
    box-sizing: content-box;
}
Jere
  • 3,377
  • 1
  • 21
  • 28
1

This has been fixed as part of Hopscotch 0.2.2, making it compatible with Bootstrap.

https://github.com/linkedin/hopscotch/issues/75

Dean James
  • 2,491
  • 4
  • 21
  • 29