From 35c464201a295cac7b6bc20e50c1f2b182405236 Mon Sep 17 00:00:00 2001
From: Maxim Kudryavtsev <maxim_71rus_wow@mail.ru>
Date: Thu, 6 Jun 2019 14:09:12 +0300
Subject: [PATCH] docs(react-scheduler): add the scheduler Appointment Tooltip
 guide (#2054)

---
 .../material-ui/controlled.jsx                |  2 +-
 .../material-ui/uncontrolled.jsx              |  2 +-
 .../docs/guides/appointment-tooltip.md        | 31 +++++++++++++++++++
 site/_data/docs/navigation.yml                |  2 ++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/dx-react-scheduler/docs/guides/appointment-tooltip.md

diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx
index 0a0dffb171..db2ed2496e 100644
--- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx
+++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx
@@ -110,9 +110,9 @@ export default class Demo extends React.PureComponent {
           <AppointmentTooltip
             showCloseButton
             visible={visible}
+            onVisibilityChange={this.toggleVisibility}
             appointmentMeta={appointmentMeta}
             onAppointmentMetaChange={this.onAppointmentMetaChange}
-            onVisibilityChange={this.toggleVisibility}
           />
         </Scheduler>
       </Paper>
diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx
index d4a66b2942..c4fa5793dc 100644
--- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx
+++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx
@@ -32,9 +32,9 @@ export default class Demo extends React.PureComponent {
           />
 
           <Appointments />
-
           <AppointmentTooltip
             showCloseButton
+            showOpenButton
           />
         </Scheduler>
       </Paper>
diff --git a/packages/dx-react-scheduler/docs/guides/appointment-tooltip.md b/packages/dx-react-scheduler/docs/guides/appointment-tooltip.md
new file mode 100644
index 0000000000..43e8d434fe
--- /dev/null
+++ b/packages/dx-react-scheduler/docs/guides/appointment-tooltip.md
@@ -0,0 +1,31 @@
+# React Scheduler - Appointment Tooltip
+
+An appointment tooltip displays information about the appointment and contains buttons that manage the appointment.
+
+## Related Plugins
+
+The following plugin is required:
+
+- [AppointmentTooltip](../reference/appointment-tooltip.md) - displays the appointment tooltip
+
+## Basic Usage
+
+Import the plugin listed above. A user can click on an appointment to show its tooltip.
+
+### Uncontrolled Mode
+
+The following demo shows how to use the appointment tooltip in uncontrolled mode:
+
+.embedded-demo({ "path": "scheduler-tooltip/uncontrolled", "showThemeSelector": true })
+
+### Controlled Mode
+
+In controlled mode, the state of `AppointmentTooltip`s should be controlled externally. To control their visibility, pass the `visible` property and `onVisibilityChange` event to the plugin. To manage the displayed data, pass the [appointmentMeta](../reference/appointment-tooltip.md#appointmentmeta) property and `onAppointmentMetaChange` event.
+
+.embedded-demo({ "path": "scheduler-tooltip/controlled", "showThemeSelector": true })
+
+### Customize the Appearance
+
+To customize the tooltip's appearance, specify the `xxxComponent` properties (`xxx` is the name of the element you want to customize). For example, the `headerComponent` and `contentComponent` properties are used to customize the tooltip's header and content, as shown in the code below. Refer to the [AppointmentTooltip API reference page](../reference/appointment-tooltip.md) for a list of all `xxxComponent` properties.
+
+.embedded-demo({ "path": "scheduler-tooltip/custom", "showThemeSelector": true })
diff --git a/site/_data/docs/navigation.yml b/site/_data/docs/navigation.yml
index e5d69463fd..435326ee7a 100644
--- a/site/_data/docs/navigation.yml
+++ b/site/_data/docs/navigation.yml
@@ -313,6 +313,8 @@
         path: /react/scheduler/docs/guides/view-switching
       - title: Date Navigation
         path: /react/scheduler/docs/guides/date-navigation
+      - title: Appointment Tooltip
+        path: /react/scheduler/docs/guides/appointment-tooltip
       - title: Editing
         path: /react/scheduler/docs/guides/editing
       - title: Localization