Merge pull request #3458 from chrisgarrity/issue/3439-sprite-tooltips

Override default tooltip location

src/components/asset-panel/selector.jsx

@@ -15,6 +15,7 @@ const Selector = props => {
         buttons,
         containerRef,
         dragType,
+        isRtl,
         items,
         selectedItemIndex,
         draggingIndex,
@@ -41,6 +42,7 @@ const Selector = props => {
                     img={img}
                     moreButtons={moreButtons}
                     title={title}
+                    tooltipPlace={isRtl ? 'left' : 'right'}
                     onClick={onClick}
                 />
             </Box>
@@ -98,6 +100,7 @@ Selector.propTypes = {
     dragType: PropTypes.oneOf(Object.keys(DragConstants)),
     draggingIndex: PropTypes.number,
     draggingType: PropTypes.oneOf(Object.keys(DragConstants)),
+    isRtl: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.shape({
         url: PropTypes.string,
         name: PropTypes.string.isRequired

src/components/sprite-selector/sprite-selector.jsx

@@ -140,7 +140,7 @@ const SpriteSelectorComponent = function (props) {
                     }
                 ]}
                 title={intl.formatMessage(messages.addSpriteFromLibrary)}
-                tooltipPlace={isRtl(intl.locale) ? 'left' : 'right'}
+                tooltipPlace={isRtl(intl.locale) ? 'right' : 'left'}
                 onClick={onNewSpriteClick}
             />
         </Box>

src/components/stage-selector/stage-selector.jsx

@@ -6,6 +6,7 @@ import {defineMessages, intlShape, injectIntl, FormattedMessage} from 'react-int
 import Box from '../box/box.jsx';
 import ActionMenu from '../action-menu/action-menu.jsx';
 import styles from './stage-selector.css';
+import {isRtl} from 'scratch-l10n';
 
 import backdropIcon from '../action-menu/icon--backdrop.svg';
 import fileUploadIcon from '../action-menu/icon--file-upload.svg';
@@ -120,6 +121,7 @@ const StageSelector = props => {
                     }
                 ]}
                 title={intl.formatMessage(messages.addBackdropFromLibrary)}
+                tooltipPlace={isRtl(intl.locale) ? 'right' : 'left'}
                 onClick={onNewBackdropClick}
             />
         </Box>

src/containers/costume-tab.jsx

@@ -235,6 +235,7 @@ class CostumeTab extends React.Component {
         const {
             dispatchUpdateRestore, // eslint-disable-line no-unused-vars
             intl,
+            isRtl,
             onNewCostumeFromCameraClick,
             onNewLibraryBackdropClick,
             onNewLibraryCostumeClick,
@@ -300,6 +301,7 @@ class CostumeTab extends React.Component {
                     }
                 ]}
                 dragType={DragConstants.COSTUME}
+                isRtl={isRtl}
                 items={costumeData}
                 selectedItemIndex={this.state.selectedCostumeIndex}
                 onDeleteClick={target && target.costumes && target.costumes.length > 1 ?
@@ -330,6 +332,7 @@ CostumeTab.propTypes = {
     dispatchUpdateRestore: PropTypes.func,
     editingTarget: PropTypes.string,
     intl: intlShape,
+    isRtl: PropTypes.bool,
     onActivateSoundsTab: PropTypes.func.isRequired,
     onNewCostumeFromCameraClick: PropTypes.func.isRequired,
     onNewLibraryBackdropClick: PropTypes.func.isRequired,
@@ -354,6 +357,7 @@ CostumeTab.propTypes = {
 
 const mapStateToProps = state => ({
     editingTarget: state.scratchGui.targets.editingTarget,
+    isRtl: state.locales.isRtl,
     sprites: state.scratchGui.targets.sprites,
     stage: state.scratchGui.targets.stage,
     dragging: state.scratchGui.assetDrag.dragging,

src/containers/sound-tab.jsx

@@ -230,6 +230,7 @@ class SoundTab extends React.Component {
                     onClick: onNewSoundFromLibraryClick
                 }]}
                 dragType={DragConstants.SOUND}
+                isRtl={isRtl}
                 items={sounds}
                 selectedItemIndex={this.state.selectedSoundIndex}
                 onDeleteClick={this.handleDeleteSound}