diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.css b/plugins/talk-plugin-featured-comments/client/components/Tag.css index 88a019b5d..7ade3d968 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.css +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.css @@ -24,6 +24,15 @@ cursor: pointer; } +.noSelect { + -ms-user-select:none; + -moz-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout:none; + user-select: none; + -webkit-tap-highlight-color:rgba(0,0,0,0); +} + .tooltip { top: 36px; left: auto; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index b7ee8cd6b..129e07851 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -4,6 +4,7 @@ import styles from './Tag.css'; import Tooltip from './Tooltip'; import {t} from 'plugin-api/beta/client/services'; import {isTagged} from 'plugin-api/beta/client/utils'; +import bowser from 'bowser'; export default class Tag extends React.Component { constructor() { @@ -15,6 +16,20 @@ export default class Tag extends React.Component { } + componentDidMount() { + if (bowser.mobile) { + this.tagEl.addEventListener('touchstart', this.showTooltip); + this.tagEl.addEventListener('touchend', this.hideTooltip); + } + } + + componentWillUnmount() { + if (bowser.mobile) { + this.tagEl.removeEventListener('touchstart', this.showTooltip); + this.tagEl.removeEventListener('touchend', this.hideTooltip); + } + } + showTooltip = () => { this.setState({ tooltip: true @@ -30,10 +45,14 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; return( -