enhancement tooltip ui (#268)

* enhancement tooltip ui

* use single quotes

Author: embbnux

src/components/CallingSettingsPanel/i18n/en-US.js

@@ -11,15 +11,12 @@ export default {
   ringoutHint: 'Ring me at my location first, then connect the called party',
   myLocationLabel: 'My Location',
   press1ToStartCallLabel: 'Prompt me to dial 1 before connecting the call',
-  [`${callingOptions.browser}Tooltip`]: `Use this option to make and receive calls
-    using your computer’s microphone and speaker.`,
-  [`${callingOptions.softphone}Tooltip`]: `Use this option to make and receive calls
-    using your {brand} for Desktop app.`,
+  [`${callingOptions.browser}Tooltip`]: 'Use this option to make and receive calls using your computer’s microphone and speaker.',
+  [`${callingOptions.softphone}Tooltip`]: 'Use this option to make and receive calls using your {brand} for Desktop app.',
   [`${callingOptions.myphone}Tooltip`]: 'Use this option to make calls using your {brand} phone.',
-  [`${callingOptions.otherphone}Tooltip`]: `Use this option to make calls using your other phones
-    such as home or cell phones that you have added in your {brand} Extension.
-    For the call you make, this phone will ring first then the party you called.`,
-  [`${callingOptions.customphone}Tooltip`]: `Use this option to make calls using any phone of
-    your choice by entering a valid phone number in the field below.
-    For the call you make, this phone will ring first then the party you called.`,
+  [`${callingOptions.myphone}Tooltip1`]: 'For the call you make, your {brand} phone will ring first then the party you called.',
+  [`${callingOptions.otherphone}Tooltip`]: 'Use this option to make calls using your other phones such as home or cell phones that you have added in your {brand} Extension.',
+  [`${callingOptions.otherphone}Tooltip1`]: 'For the call you make, this phone will ring first then the party you called.',
+  [`${callingOptions.customphone}Tooltip`]: 'Use this option to make calls using any phone of your choice by entering a valid phone number in the field below.',
+  [`${callingOptions.customphone}Tooltip1`]: 'For the call you make, this phone will ring first then the party you called.',
 };

src/components/CallingSettingsPanel/index.js

@@ -95,10 +95,37 @@ export default class CallingSettingsPanel extends Component {
       ringoutPrompt: checked,
     });
   }
+
+  getTooltipContent() {
+    let contentKeys;
+    if (this.state.callWith === callingOptions.browser
+      || this.state.callWith === callingOptions.softphone
+    ) {
+      contentKeys = [`${this.state.callWith}Tooltip`];
+    } else {
+      contentKeys = [`${this.state.callWith}Tooltip`, `${this.state.callWith}Tooltip1`];
+    }
+    return (
+      <div>
+        {
+          contentKeys.map(contentKey => (
+            <div key={contentKey}>
+              {formatMessage(
+                i18n.getString(contentKey, this.props.currentLocale),
+                { brand: this.props.brand }
+              )}
+            </div>
+          ))
+        }
+      </div>
+    );
+  }
+
   renderHandler = (option) => {
     const brand = this.props.brand;
     return formatMessage(i18n.getString(option, this.props.currentLocale), { brand });
   }
+
   render() {
     const {
       currentLocale,
@@ -173,16 +200,7 @@ export default class CallingSettingsPanel extends Component {
         </div>
       ) : null;
 
-    const toolTip = (
-      <div style={{ width: 150 }}>
-        {
-          formatMessage(
-            i18n.getString(`${this.state.callWith}Tooltip`, currentLocale),
-            { brand: this.props.brand }
-          )
-        }
-      </div>
-    );
+    const toolTip = this.getTooltipContent();
     return (
       <div className={classnames(styles.root, className)}>
         <BackHeader
@@ -201,7 +219,11 @@ export default class CallingSettingsPanel extends Component {
                   placement="bottom"
                   trigger="click"
                   overlay={toolTip}
+                  align={{
+                    offset: [0, 47],
+                  }}
                   arrowContent={<div className="rc-tooltip-arrow-inner" />}
+                  getTooltipContainer={() => this.tooltipContainner}
                 >
                   <i className={classnames(dynamicsFont.information, styles.infoIcon)} />
                 </Tooltip>
@@ -220,6 +242,12 @@ export default class CallingSettingsPanel extends Component {
               disabled={disabled}
               titleEnabled
             />
+            <div
+              className={styles.tooltipContainner}
+              ref={(tooltipContainner) => {
+                this.tooltipContainner = tooltipContainner;
+              }}
+            />
           </InputField>
           {ringout}
         </Panel>

src/components/CallingSettingsPanel/styles.scss

@@ -30,6 +30,15 @@
   color: #848484;
 }
 
+.tooltipContainner {
+  width: 100%;
+  height: 1px;
+  :global .rc-tooltip {
+    opacity: 1;
+    left: 0!important;
+  }
+}
+
 .ringoutHint {
   padding: 15px 0px;
   @include primary-font;