diff --git a/demo/res/css/hopscotch.css b/demo/res/css/hopscotch.css
index bf8e6971c5..47e9ae006d 100755
--- a/demo/res/css/hopscotch.css
+++ b/demo/res/css/hopscotch.css
@@ -322,11 +322,12 @@ div.hopscotch-bubble .hopscotch-nav-button.prev:hover {
div.hopscotch-bubble {
background-color: #ffffff;
border: 5px solid #000000;
+ border-radius: 10px;
/* default */
- border: 5px solid rgba(0, 0, 0, 0.5);
+ border: 5px solid rgba(0, 0, 0, 0.3);
/* transparent, if supported */
color: #333;
- font-family: Helvetica, Arial;
+ font-family: 'Helvetica Neue', Helvetica, Arial;
font-size: 13px;
position: absolute;
z-index: 999999;
@@ -387,14 +388,14 @@ div.hopscotch-bubble .hopscotch-bubble-container {
/* to fix text flickering */
}
div.hopscotch-bubble .hopscotch-content {
- font-family: Helvetica, Arial;
+ font-family: 'Helvetica Neue', Helvetica, Arial;
font-weight: normal;
line-height: 17px;
margin: -5px 0 11px;
padding-top: 8px;
}
div.hopscotch-bubble .hopscotch-bubble-content {
- margin: 0 0 0 40px;
+ margin: 0;
}
div.hopscotch-bubble.no-number .hopscotch-bubble-content {
margin: 0;
@@ -421,7 +422,8 @@ div.hopscotch-bubble .hopscotch-bubble-close.hide-all {
display: none;
}
div.hopscotch-bubble .hopscotch-bubble-number {
- background: transparent url(../img/sprite-green.png) 0 0 no-repeat;
+ display: none;
+/* background: transparent url(../img/sprite-green.png) 0 0 no-repeat;
color: #fff;
display: block;
float: left;
@@ -431,7 +433,7 @@ div.hopscotch-bubble .hopscotch-bubble-number {
padding: 0 10px 0 0;
text-align: center;
width: 30px;
- height: 30px;
+ height: 30px; */
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container {
position: absolute;
diff --git a/demo/src/DemoInitializer.js b/demo/src/DemoInitializer.js
index 39cffcda9a..1f583ab4ef 100644
--- a/demo/src/DemoInitializer.js
+++ b/demo/src/DemoInitializer.js
@@ -100,11 +100,17 @@ define(
},
{
title: "Create Button",
- content: "Many objects in the application are created via this button. Click it to view the Create menu, and rollover each item in the menu to see more information about it. Click 'Next' when ready to continue.",
+ content: "Many objects in the application are created via this button. Click it now to view the Create menu, and rollover each item in the menu to see more information about it. Or, click 'Next' to continue.",
target: ".create-btn",
placement: "right",
- width: "700px",
- yOffset: "-10px"
+ yOffset: "-10px",
+ nextOnTargetClick: true
+ },
+ {
+ title: "Inspection Pane",
+ content: "This pane shows useful information about the currently selected item. You can hide this pane by clicking its 'X' icon to the right.",
+ target: ".split-pane-component.t-inspect",
+ placement: "left"
},
{
title: "Search",
@@ -113,12 +119,6 @@ define(
placement: "right",
yOffset: "-20px"
},
- {
- title: "Inspection Pane",
- content: "This pane shows useful information about the currently selected item. You can hide this pane by clicking its 'X' icon to the right.",
- target: ".split-pane-component.t-inspect",
- placement: "left"
- },
{
title: "Editing",
content: "This part of the tour will step you through editing an object. Anything you change won’t be persisted, so don’t refresh your browser. Click 'Next' to continue.",
@@ -137,11 +137,12 @@ define(
},
{
title: "Edit Button",
- content: "Click this button now to begin editing the current object, then click 'Next' to continue.",
+ content: "Click this button now to begin editing the current object, or click 'Next' to continue.",
target: ".object-browse-bar .btn-bar",
placement: "bottom",
width: "200px",
- xOffset: "-20px"
+ xOffset: "-20px",
+ nextOnTargetClick: true
},
{
title: "Editing",
@@ -181,7 +182,7 @@ define(
},
{
title: "Object Types",
- content: "Try experimenting creating different object types, and adding other objects to them by dragging them from the tree. Only certain types of objects can be dragged into a given object type - if a type of object can’t be added, it simply won’t. ",
+ content: "Try experimenting creating different object types, and adding objects to them by dragging them from the tree. Only certain types of objects can be dragged into a given object type - if a type of object can’t be added, it simply won’t. ",
target: ".user-environ",
placement: "top",
xOffset: "center",