tooltip: do not use a div container for tooltips

Fixes #870
iterative · Jan 10, 2020 · a334bc8 · a334bc8
1 parent 06f1071
commit a334bc8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
@@ -1,4 +1,4 @@
-import { OnlyDesktop, OnlyMobile } from '../styles'
+import { OnlyDesktopInline, OnlyMobileInline } from '../styles'
 import React, { Component } from 'react'
 
 import DesktopView from './desktop-view'
@@ -37,21 +37,21 @@ class Tooltip extends Component {
     if (this.state.match) {
       return (
         <>
-          <OnlyDesktop>
+          <OnlyDesktopInline>
             <DesktopView
               description={this.state.description}
               header={this.state.header}
               id={this.props.id}
               text={this.props.text}
             />
-          </OnlyDesktop>
-          <OnlyMobile>
+          </OnlyDesktopInline>
+          <OnlyMobileInline>
             <MobileView
               description={this.state.description}
               header={this.state.header}
               text={this.props.text}
             />
-          </OnlyMobile>
+          </OnlyMobileInline>
         </>
       )
     } else {

diff --git a/src/styles.js b/src/styles.js
@@ -149,3 +149,21 @@ export const OnlyDesktop = styled.div`
   ${media.phablet`display: none;`};
   ${media.phone`display: none;`};
 `
+
+export const OnlyMobileInline = styled.span`
+  display: none;
+  ${media.giant`display: none;`};
+  ${media.desktop`display: none;`};
+  ${media.tablet`display: none;`};
+  ${media.phablet`display: inline-block;`};
+  ${media.phone`display: inline-block;`};
+`
+
+export const OnlyDesktopInline = styled.span`
+  display: inline-block;
+  ${media.giant`display: inline-block;`};
+  ${media.desktop`display: inline-block;`};
+  ${media.tablet`display: inline-block;`};
+  ${media.phablet`display: none;`};
+  ${media.phone`display: none;`};
+`