From e47e49fb750cc0e29a5e8a60b29e7bcaa4127173 Mon Sep 17 00:00:00 2001
From: Adeel Kazmi <adeel.kazmi@samsung.com>
Date: Fri, 23 Dec 2016 10:41:29 +0000
Subject: [PATCH] Added a tooltip example

Change-Id: I5909a67d2bff74f23c758862198df4da1e6c4627
---
 build/tizen/CMakeLists.txt                         |   1 +
 com.samsung.dali-demo.xml                          |   3 +
 demo/dali-demo.cpp                                 |   1 +
 examples/tooltip/tooltip-example.cpp               | 180 +++++++++++++++++++++
 resources/images/tooltip-tail-above.png            | Bin 0 -> 3186 bytes
 resources/images/tooltip-tail-below.png            | Bin 0 -> 3242 bytes
 resources/images/tooltip.9.png                     | Bin 0 -> 3016 bytes
 resources/po/as.po                                 |   3 +
 resources/po/de.po                                 |   3 +
 resources/po/en_GB.po                              |   3 +
 resources/po/en_US.po                              |   3 +
 resources/po/es.po                                 |   3 +
 resources/po/fi.po                                 |   3 +
 resources/po/ko.po                                 |   3 +
 resources/po/ml.po                                 |   3 +
 resources/po/ur.po                                 |   3 +
 resources/po/zn_CH.po                              |   3 +
 resources/style/.gitignore                         |   1 +
 .../style/mobile/tooltip-example-theme.json.in     |  85 ++++++++++
 resources/style/tooltip-example-theme.json.in      |  85 ++++++++++
 shared/dali-demo-strings.h                         |  10 +-
 21 files changed, 392 insertions(+), 4 deletions(-)
 create mode 100644 examples/tooltip/tooltip-example.cpp
 create mode 100644 resources/images/tooltip-tail-above.png
 create mode 100644 resources/images/tooltip-tail-below.png
 create mode 100644 resources/images/tooltip.9.png
 create mode 100644 resources/style/mobile/tooltip-example-theme.json.in
 create mode 100644 resources/style/tooltip-example-theme.json.in

diff --git a/build/tizen/CMakeLists.txt b/build/tizen/CMakeLists.txt
index 168d55e..309f3e0 100644
--- a/build/tizen/CMakeLists.txt
+++ b/build/tizen/CMakeLists.txt
@@ -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")
diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml
index 7fe738b..046061d 100644
--- a/com.samsung.dali-demo.xml
+++ b/com.samsung.dali-demo.xml
@@ -181,4 +181,7 @@
 	<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>
diff --git a/demo/dali-demo.cpp b/demo/dali-demo.cpp
index bbf9b02..904e3be 100644
--- a/demo/dali-demo.cpp
+++ b/demo/dali-demo.cpp
@@ -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
index 0000000..3af4e11
--- /dev/null
+++ b/examples/tooltip/tooltip-example.cpp
@@ -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
index 0000000000000000000000000000000000000000..9cbcfa09aabc24980f968f38d9b60a0f8d232e3b
GIT binary patch
literal 3186
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
Y2XQ$>t89>$8~^|S07*qoM6N<$g3@a4r2qf`

literal 0
HcmV?d00001

diff --git a/resources/images/tooltip-tail-below.png b/resources/images/tooltip-tail-below.png
new file mode 100644
index 0000000000000000000000000000000000000000..f24c92ee841b76623e62e23ede81624d282c63ce
GIT binary patch
literal 3242
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

literal 0
HcmV?d00001

diff --git a/resources/images/tooltip.9.png b/resources/images/tooltip.9.png
new file mode 100644
index 0000000000000000000000000000000000000000..9939dfe36c9aa3c4fdf40d9036ed85835dd5fb5c
GIT binary patch
literal 3016
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
KMNUMnLSTZGRms!<

literal 0
HcmV?d00001

diff --git a/resources/po/as.po b/resources/po/as.po
index 7d01811..5d9f329 100755
--- a/resources/po/as.po
+++ b/resources/po/as.po
@@ -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 খেলা"
diff --git a/resources/po/de.po b/resources/po/de.po
index a3af75f..b76a0f5 100755
--- a/resources/po/de.po
+++ b/resources/po/de.po
@@ -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"
diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po
index bee7ff6..2bc0e21 100755
--- a/resources/po/en_GB.po
+++ b/resources/po/en_GB.po
@@ -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"
 
diff --git a/resources/po/en_US.po b/resources/po/en_US.po
index c853a3e..501c311 100755
--- a/resources/po/en_US.po
+++ b/resources/po/en_US.po
@@ -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"
 
diff --git a/resources/po/es.po b/resources/po/es.po
index 2acd762..49a7683 100755
--- a/resources/po/es.po
+++ b/resources/po/es.po
@@ -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"
diff --git a/resources/po/fi.po b/resources/po/fi.po
index 180e491..7cd5658 100755
--- a/resources/po/fi.po
+++ b/resources/po/fi.po
@@ -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"
diff --git a/resources/po/ko.po b/resources/po/ko.po
index 5c283e0..e8d35a8 100755
--- a/resources/po/ko.po
+++ b/resources/po/ko.po
@@ -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"
diff --git a/resources/po/ml.po b/resources/po/ml.po
index cbb9222..525722e 100755
--- a/resources/po/ml.po
+++ b/resources/po/ml.po
@@ -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"
diff --git a/resources/po/ur.po b/resources/po/ur.po
index 4e67d88..4dbbf49 100755
--- a/resources/po/ur.po
+++ b/resources/po/ur.po
@@ -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 گیم"
diff --git a/resources/po/zn_CH.po b/resources/po/zn_CH.po
index 181a996..035b724 100755
--- a/resources/po/zn_CH.po
+++ b/resources/po/zn_CH.po
@@ -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游戏"
diff --git a/resources/style/.gitignore b/resources/style/.gitignore
index d967080..1fd715e 100644
--- a/resources/style/.gitignore
+++ b/resources/style/.gitignore
@@ -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
index 0000000..aa2cfb5
--- /dev/null
+++ b/resources/style/mobile/tooltip-example-theme.json.in
@@ -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
index 0000000..aa2cfb5
--- /dev/null
+++ b/resources/style/tooltip-example-theme.json.in
@@ -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/shared/dali-demo-strings.h b/shared/dali-demo-strings.h
index 9a35939..c8b3283 100644
--- a/shared/dali-demo-strings.h
+++ b/shared/dali-demo-strings.h
@@ -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
 
-- 
2.7.4