Add tooltip (title) props to both Picker & Emoji

README.md

@@ -40,6 +40,7 @@ import { Picker } from 'emoji-mart'
 | **backgroundImageFn** | | ```((set, sheetSize) => …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not |
 | **showPreview** | | `true` | Display preview section |
+| **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
 | **skin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
@@ -143,6 +144,7 @@ import { Emoji } from 'emoji-mart'
 | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
 | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
+| **tooltip** | | `false` | Show emoji short name when hovering (title) |
 
 ## Custom emojis
 You can provide custom emojis which will show up in their own category.

src/components/emoji.js

@@ -54,15 +54,20 @@ const Emoji = (props) => {
     }
   }
 
-  var { unified, custom, imageUrl } = _getData(props),
+  var { unified, custom, short_names, imageUrl } = _getData(props),
       style = {},
       children = props.children,
-      className = 'emoji-mart-emoji'
+      className = 'emoji-mart-emoji',
+      title = null
 
   if (!unified && !custom) {
     return null
   }
 
+  if (props.tooltip) {
+    title = short_names[0]
+  }
+
   if (props.native && unified) {
     className += ' emoji-mart-emoji-native'
     style = { fontSize: props.size }
@@ -104,6 +109,7 @@ const Emoji = (props) => {
     onClick={(e) => _handleClick(e, props)}
     onMouseEnter={(e) => _handleOver(e, props)}
     onMouseLeave={(e) => _handleLeave(e, props)}
+    title={title}
     className={className}>
     <span style={style}>{children}</span>
   </span>
@@ -116,6 +122,7 @@ Emoji.propTypes = {
   backgroundImageFn: PropTypes.func,
   native: PropTypes.bool,
   forceSize: PropTypes.bool,
+  tooltip: PropTypes.bool,
   skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
   set: PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']),
@@ -132,6 +139,7 @@ Emoji.defaultProps = {
   sheetSize: 64,
   native: false,
   forceSize: false,
+  tooltip: false,
   backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets/${sheetSize}.png`),
   onOver: (() => {}),
   onLeave: (() => {}),

src/components/picker.js

@@ -374,7 +374,7 @@ export default class Picker extends React.PureComponent {
   }
 
   render() {
-    var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, showPreview, include, exclude, autoFocus } = this.props,
+    var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, showPreview, emojiTooltip, include, exclude, autoFocus } = this.props,
         { skin } = this.state,
         width = (perLine * (emojiSize + 12)) + 12 + 2 + measureScrollbar()
 
@@ -419,6 +419,7 @@ export default class Picker extends React.PureComponent {
               set: set,
               sheetSize: sheetSize,
               forceSize: native,
+              tooltip: emojiTooltip,
               backgroundImageFn: backgroundImageFn,
               onOver: this.handleEmojiOver,
               onLeave: this.handleEmojiLeave,
@@ -467,6 +468,7 @@ Picker.propTypes = {
   sheetSize: Emoji.propTypes.sheetSize,
   emojisToShowFilter: PropTypes.func,
   showPreview: PropTypes.bool,
+  emojiTooltip: Emoji.propTypes.tooltip,
   include: PropTypes.arrayOf(PropTypes.string),
   exclude: PropTypes.arrayOf(PropTypes.string),
   autoFocus: PropTypes.bool,
@@ -495,6 +497,7 @@ Picker.defaultProps = {
   backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
   emojisToShowFilter: null,
   showPreview: true,
+  emojiTooltip: Emoji.defaultProps.tooltip,
   autoFocus: false,
   custom: [],
 }