Added a tooltip example 90/106890/5
authorAdeel Kazmi <adeel.kazmi@samsung.com>
Fri, 23 Dec 2016 10:41:29 +0000 (10:41 +0000)
committerAdeel Kazmi <adeel.kazmi@samsung.com>
Wed, 28 Dec 2016 15:15:29 +0000 (15:15 +0000)
Change-Id: I5909a67d2bff74f23c758862198df4da1e6c4627

21 files changed:
build/tizen/CMakeLists.txt
com.samsung.dali-demo.xml
demo/dali-demo.cpp
examples/tooltip/tooltip-example.cpp [new file with mode: 0644]
resources/images/tooltip-tail-above.png [new file with mode: 0644]
resources/images/tooltip-tail-below.png [new file with mode: 0644]
resources/images/tooltip.9.png [new file with mode: 0644]
resources/po/as.po
resources/po/de.po
resources/po/en_GB.po
resources/po/en_US.po
resources/po/es.po
resources/po/fi.po
resources/po/ko.po
resources/po/ml.po
resources/po/ur.po
resources/po/zn_CH.po
resources/style/.gitignore
resources/style/mobile/tooltip-example-theme.json.in [new file with mode: 0644]
resources/style/tooltip-example-theme.json.in [new file with mode: 0644]
shared/dali-demo-strings.h

index 168d55e..309f3e0 100644 (file)
@@ -105,6 +105,7 @@ CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/contact-cards-example-theme.json.in ${LOCAL_S
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-one.json.in ${LOCAL_STYLE_DIR}/style-example-theme-one.json )
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-two.json.in ${LOCAL_STYLE_DIR}/style-example-theme-two.json )
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-three.json.in ${LOCAL_STYLE_DIR}/style-example-theme-three.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/tooltip-example-theme.json.in ${LOCAL_STYLE_DIR}/tooltip-example-theme.json )
 MESSAGE("Configured ${LOCAL_STYLE_DIR}/style-example-theme<>.json files")
 
 FILE(GLOB LOCAL_STYLES_LIST "${LOCAL_STYLE_DIR}/*.json")
index 7fe738b..046061d 100644 (file)
        <ui-application appid="animated-images.example" exec="/usr/apps/com.samsung.dali-demo/bin/animated-images.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
                <label>Animated images</label>
        </ui-application>
+       <ui-application appid="tooltip.example" exec="/usr/apps/com.samsung.dali-demo/bin/tooltip.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+               <label>Tooltip</label>
+       </ui-application>
 </manifest>
index bbf9b02..904e3be 100644 (file)
@@ -88,6 +88,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("contact-cards.example", DALI_DEMO_STR_TITLE_CONTACT_CARDS));
   demo.AddExample(Example("flex-container.example", DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND));
   demo.AddExample(Example("fpp-game.example", DALI_DEMO_STR_TITLE_FPP_GAME));
+  demo.AddExample(Example("tooltip.example", DALI_DEMO_STR_TITLE_TOOLTIP));
 
   demo.SortAlphabetically( true );
 
diff --git a/examples/tooltip/tooltip-example.cpp b/examples/tooltip/tooltip-example.cpp
new file mode 100644 (file)
index 0000000..3af4e11
--- /dev/null
@@ -0,0 +1,180 @@
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/controls/tooltip/tooltip-properties.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const Vector4 STAGE_COLOR( 211.0f / 255.0f, 211.0f / 255.0f, 211.0f / 255.0f, 1.0f ); ///< The color of the stage
+const char * const THEME_PATH( DEMO_STYLE_DIR "tooltip-example-theme.json" ); ///< The theme used for this example
+const float POSITION_INCREMENTER( 0.2f ); ///< The position difference between the controls along the Y-Axis.
+} // unnamed namespace
+
+/**
+ * @brief Creates a controller which demonstrates the tooltip functionality in control.
+ *
+ * The Control base class supports tooltip functionality. However, the Toolkit Tooltip style is only set on Buttons by default.
+ * This example portrays the different ways in which a tooltip can be displayed and customised.
+ */
+class TooltipController : public ConnectionTracker
+{
+public:
+
+  TooltipController( Application& application )
+  : mApplication( application ),
+    previousPosition( 0.0f )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &TooltipController::Create );
+  }
+
+private:
+
+  // The Init signal is received once (only) during the Application lifetime
+  void Create( Application& application )
+  {
+    // Hide the indicator bar
+    application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+    // Set the stage background color and connect to the stage's key signal to allow Back and Escape to exit.
+    Stage stage = Stage::GetCurrent();
+    stage.SetBackgroundColor( STAGE_COLOR );
+    stage.KeyEventSignal().Connect( this, &TooltipController::OnKeyEvent );
+    const Vector2 stageSize = stage.GetSize();
+
+    // Add a text label at the top for information purposes
+    Control label = TextLabel::New( "Hover over buttons to see tooltip" );
+    label.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "Center" );
+    stage.Add( label );
+
+    // Simple tooltip from stylesheet
+    Control simple = PushButton::New();
+    simple.SetStyleName( "TooltipTextOnly" );
+    SetLabel( simple, "Simple" );
+    Layout( simple, stageSize );
+    stage.Add( simple );
+
+    // Tooltip with icon and text, from stylesheet
+    Control iconWithText = PushButton::New();
+    iconWithText.SetStyleName( "TooltipArray" );
+    SetLabel( iconWithText, "Icon with Text" );
+    Layout( iconWithText, stageSize );
+    stage.Add( iconWithText );
+
+    // Tooltip with custom style, from stylesheet
+    Control customFromStylesheet = PushButton::New();
+    customFromStylesheet.SetStyleName( "TooltipCustom" );
+    SetLabel( customFromStylesheet, "Custom From Stylesheet" );
+    Layout( customFromStylesheet, stageSize );
+    stage.Add( customFromStylesheet );
+
+    // Tooltip with custom style, from code
+    Control customFromCode = PushButton::New();
+    SetLabel( customFromCode, "Custom From Code" );
+    Layout( customFromCode, stageSize );
+    customFromCode.SetProperty( DevelControl::Property::TOOLTIP,
+                                Property::Map().Add( Tooltip::Property::CONTENT,
+                                                     Property::Array().Add( Property::Map().Add( Visual::Property::TYPE, Visual::IMAGE )
+                                                                                           .Add( ImageVisual::Property::URL, DEMO_IMAGE_DIR "Logo-for-demo.png" ) )
+                                                                      .Add( Property::Map().Add( Visual::Property::TYPE, DevelVisual::TEXT )
+                                                                                           .Add( TextVisual::Property::TEXT_COLOR, Color::WHITE )
+                                                                                           .Add( TextVisual::Property::TEXT, "Custom coded style\nat hover point" )
+                                                                                           .Add( TextVisual::Property::MULTI_LINE, true )
+                                                                                           .Add( TextVisual::Property::HORIZONTAL_ALIGNMENT, "CENTER" )
+                                                                                           .Add( TextVisual::Property::POINT_SIZE, 16 ) ) )
+                                               .Add( Tooltip::Property::LAYOUT, Vector2( 2, 1 ) )
+                                               .Add( Tooltip::Property::POSITION, Tooltip::Position::HOVER_POINT )
+                                               .Add( Tooltip::Property::BACKGROUND,
+                                                     Property::Map().Add( Tooltip::Background::Property::VISUAL, DEMO_IMAGE_DIR "tooltip.9.png" )
+                                                                    .Add( Tooltip::Background::Property::BORDER, Rect< int >( 1, 5, 5, 1 ) ) )
+                              );
+    stage.Add( customFromCode );
+  }
+
+  /**
+   * @brief Called when any key event is received
+   *
+   * Will use this to quit the application if Back or the Escape key is received
+   * @param[in]  event  The key event information
+   */
+  void OnKeyEvent( const KeyEvent& event )
+  {
+    if( event.state == KeyEvent::Down )
+    {
+      if ( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+  /**
+   * @brief Sets the label on the control.
+   * @param[in]  label  The label to set.
+   */
+  void SetLabel( Control control, std::string label )
+  {
+    if( control )
+    {
+      control.SetProperty( Button::Property::LABEL,
+                           Property::Map().Add( Visual::Property::TYPE, DevelVisual::TEXT )
+                                          .Add( TextVisual::Property::TEXT, label ) );
+    }
+  }
+
+  /**
+   * @brief Lays out the control in the appropriate location.
+   * @param[in]  control    The control to layout.
+   * @param[in]  stageSize  The size of the stage, passing it in so we don't have to retrieve it every time.
+   */
+  void Layout( Control control, const Vector2& stageSize )
+  {
+    if( control )
+    {
+      previousPosition += POSITION_INCREMENTER;
+      control.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
+      control.SetSizeModeFactor( Vector3( 0.75, 0.1, 1.0 ) );
+      control.SetAnchorPoint( AnchorPoint::CENTER );
+      control.SetParentOrigin( ParentOrigin::TOP_CENTER );
+      control.SetY( stageSize.height * previousPosition );
+    }
+  }
+
+private:
+  Application&  mApplication;
+  float previousPosition;
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv, THEME_PATH );
+
+  TooltipController test( application );
+
+  application.MainLoop();
+
+  return 0;
+}
diff --git a/resources/images/tooltip-tail-above.png b/resources/images/tooltip-tail-above.png
new file mode 100644 (file)
index 0000000..9cbcfa0
Binary files /dev/null and b/resources/images/tooltip-tail-above.png differ
diff --git a/resources/images/tooltip-tail-below.png b/resources/images/tooltip-tail-below.png
new file mode 100644 (file)
index 0000000..f24c92e
Binary files /dev/null and b/resources/images/tooltip-tail-below.png differ
diff --git a/resources/images/tooltip.9.png b/resources/images/tooltip.9.png
new file mode 100644 (file)
index 0000000..9939dfe
Binary files /dev/null and b/resources/images/tooltip.9.png differ
index 7d01811..5d9f329 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "অকনিষ্ঠ অৰ্জুন বঁটা"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "টিল্ট অনুভূতি"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "Tooltip"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP খেলা"
index a3af75f..b76a0f5 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "Text Scrollen"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "Neigungssensor"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "Kurzinfo"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Spiel"
index bee7ff6..2bc0e21 100755 (executable)
@@ -151,6 +151,9 @@ msgstr "Text Scrolling"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "Tilt Sensor"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "Tooltip"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Game"
 
index c853a3e..501c311 100755 (executable)
@@ -151,6 +151,9 @@ msgstr "Text Scrolling"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "Tilt Sensor"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "Tooltip"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Game"
 
index 2acd762..49a7683 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "Texto con desplazamiento"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "Sensor de inclinacion"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "Tooltip"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "Juego FPP"
index 180e491..7cd5658 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "Tekstin Vieritys"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "Kallistustunnistin"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "Tooltip"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP peli"
index 5c283e0..e8d35a8 100755 (executable)
@@ -152,5 +152,8 @@ msgstr "텍스트 스크롤"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "기울기 센서"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "툴팁"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Game"
index cbb9222..525722e 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "ടെക്സ്റ്റ് സ്ക്രോളിംഗ്"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "ചെരിവ് സെൻസർ"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "കൂടുതൽ വിവരങ്ങൾ"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Game"
index 4e67d88..4dbbf49 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "حروف کاسکرال "
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "ٹلٹ سینسر"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "مزید معلومات"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP گیم"
index 181a996..035b724 100755 (executable)
@@ -151,5 +151,8 @@ msgstr "滚动文字"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
 msgstr "倾斜传感器"
 
+msgid "DALI_DEMO_STR_TITLE_TOOLTIP"
+msgstr "更多信息"
+
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP游戏"
index d967080..1fd715e 100644 (file)
@@ -3,3 +3,4 @@ contact-cards-example-theme.json
 style-example-theme-three.json
 style-example-theme-two.json
 style-example-theme-one.json
+tooltip-example-theme.json
diff --git a/resources/style/mobile/tooltip-example-theme.json.in b/resources/style/mobile/tooltip-example-theme.json.in
new file mode 100644 (file)
index 0000000..aa2cfb5
--- /dev/null
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+{
+  "styles":
+  {
+    "TooltipTextOnly" :
+    {
+      "tooltip": "Using defaults defined in the Toolkit stylesheet"
+    },
+
+    "TooltipArray" :
+    {
+      "tooltip" :
+      {
+        "content" :
+        [
+          {
+            "visualType" : "IMAGE",
+            "url" : "{APPLICATION_RESOURCE_PATH}/images/application-icon-0.png",
+            "desiredWidth" : 75,
+            "desiredHeight" : 75
+          },
+          {
+            "visualType" : "TEXT",
+            "text" : "An icon on the left and\nmulti-line text on the right",
+            "multiLine" : true,
+            "pointSize" : 16
+          }
+        ],
+        "tail" : true
+      }
+    },
+
+    "TooltipCustom" :
+    {
+      "tooltip":
+      {
+        "content":
+        {
+          "visualType" : "TEXT",
+          "textColor" : [1,1,1,1],
+          "text" : "Completely custom style\nthat disappears on movement",
+          "multiLine" : true,
+          "pointSize" : 16
+        },
+        "waitTime":0.5,
+        "background":
+        {
+          "visual":"{APPLICATION_RESOURCE_PATH}/images/tooltip.9.png",
+          "border":[1,5,5,1]
+        },
+        "tail":
+        {
+          "visibility":true,
+          "aboveVisual":"{APPLICATION_RESOURCE_PATH}/images/tooltip-tail-above.png",
+          "belowVisual":"{APPLICATION_RESOURCE_PATH}/images/tooltip-tail-below.png"
+        },
+        "position":"ABOVE",
+        "hoverPointOffset":[10,10],
+        "movementThreshold":5,
+        "disappearOnMovement":true
+      }
+    },
+
+    "TableView" :
+    {
+      "cellPadding" : [ 5.0, 5.0 ]
+    }
+  }
+}
diff --git a/resources/style/tooltip-example-theme.json.in b/resources/style/tooltip-example-theme.json.in
new file mode 100644 (file)
index 0000000..aa2cfb5
--- /dev/null
@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+{
+  "styles":
+  {
+    "TooltipTextOnly" :
+    {
+      "tooltip": "Using defaults defined in the Toolkit stylesheet"
+    },
+
+    "TooltipArray" :
+    {
+      "tooltip" :
+      {
+        "content" :
+        [
+          {
+            "visualType" : "IMAGE",
+            "url" : "{APPLICATION_RESOURCE_PATH}/images/application-icon-0.png",
+            "desiredWidth" : 75,
+            "desiredHeight" : 75
+          },
+          {
+            "visualType" : "TEXT",
+            "text" : "An icon on the left and\nmulti-line text on the right",
+            "multiLine" : true,
+            "pointSize" : 16
+          }
+        ],
+        "tail" : true
+      }
+    },
+
+    "TooltipCustom" :
+    {
+      "tooltip":
+      {
+        "content":
+        {
+          "visualType" : "TEXT",
+          "textColor" : [1,1,1,1],
+          "text" : "Completely custom style\nthat disappears on movement",
+          "multiLine" : true,
+          "pointSize" : 16
+        },
+        "waitTime":0.5,
+        "background":
+        {
+          "visual":"{APPLICATION_RESOURCE_PATH}/images/tooltip.9.png",
+          "border":[1,5,5,1]
+        },
+        "tail":
+        {
+          "visibility":true,
+          "aboveVisual":"{APPLICATION_RESOURCE_PATH}/images/tooltip-tail-above.png",
+          "belowVisual":"{APPLICATION_RESOURCE_PATH}/images/tooltip-tail-below.png"
+        },
+        "position":"ABOVE",
+        "hoverPointOffset":[10,10],
+        "movementThreshold":5,
+        "disappearOnMovement":true
+      }
+    },
+
+    "TableView" :
+    {
+      "cellPadding" : [ 5.0, 5.0 ]
+    }
+  }
+}
index 9a35939..c8b3283 100644 (file)
@@ -43,6 +43,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION         dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION")
 #define DALI_DEMO_STR_TITLE_EFFECTS_VIEW                dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_EFFECTS_VIEW")
 #define DALI_DEMO_STR_TITLE_EMOJI_TEXT                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_EMOJI_TEXT")
+#define DALI_DEMO_STR_TITLE_FPP_GAME                    dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_FPP_GAME")
 #define DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND          dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND")
 #define DALI_DEMO_STR_TITLE_IMAGE_FITTING_SAMPLING      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_IMAGE_FITTING_SAMPLING")
 #define DALI_DEMO_STR_TITLE_IMAGE_SCALING               dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_IMAGE_SCALING")
@@ -66,8 +67,8 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE")
 #define DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW")
 #define DALI_DEMO_STR_TITLE_POPUP                       dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_POPUP")
-#define DALI_DEMO_STR_TITLE_PROGRESS_BAR                dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PROGRESS_BAR")
 #define DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES")
+#define DALI_DEMO_STR_TITLE_PROGRESS_BAR                dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PROGRESS_BAR")
 #define DALI_DEMO_STR_TITLE_REFRACTION                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_REFRACTION")
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI")
@@ -82,7 +83,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_TEXT_LABEL_MULTI_LANGUAGE   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_LABEL_MULTI_LANGUAGE")
 #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_SCROLLING")
 #define DALI_DEMO_STR_TITLE_TILT_SENSOR                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TILT_SENSOR")
-#define DALI_DEMO_STR_TITLE_FPP_GAME                    dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_FPP_GAME")
+#define DALI_DEMO_STR_TITLE_TOOLTIP                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TOOLTIP")
 #define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS          dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS")
 
 #else // !INTERNATIONALIZATION_ENABLED
@@ -98,6 +99,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION         "Dissolve Effect"
 #define DALI_DEMO_STR_TITLE_EFFECTS_VIEW                "Effects View"
 #define DALI_DEMO_STR_TITLE_EMOJI_TEXT                  "Emoji Text"
+#define DALI_DEMO_STR_TITLE_FPP_GAME                    "First Person Game"
 #define DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND          "Flexbox Playground"
 #define DALI_DEMO_STR_TITLE_IMAGE_FITTING_SAMPLING      "Image Fitting and Sampling"
 #define DALI_DEMO_STR_TITLE_IMAGE_SCALING               "Image Scaling Grid"
@@ -122,6 +124,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW              "Page Turn View"
 #define DALI_DEMO_STR_TITLE_POPUP                       "Popup"
 #define DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES            "Primitive Shapes"
+#define DALI_DEMO_STR_TITLE_PROGRESS_BAR                "Progress Bar"
 #define DALI_DEMO_STR_TITLE_REFRACTION                  "Refract Effect"
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            "Renderer Stencils"
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             "Script Based UI"
@@ -136,8 +139,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_TEXT_LABEL_MULTI_LANGUAGE   "Text Scripts"
 #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING              "Text Scrolling"
 #define DALI_DEMO_STR_TITLE_TILT_SENSOR                 "Tilt Sensor"
-#define DALI_DEMO_STR_TITLE_PROGRESS_BAR                "Progress Bar"
-#define DALI_DEMO_STR_TITLE_FPP_GAME                    "First Person Game"
+#define DALI_DEMO_STR_TITLE_TOOLTIP                     "Tooltip"
 #define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS          "Visual Transitions"
 #endif