mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 07:21:16 +08:00
Merge pull request #5610 from storybooks/5591-fix-tooltip-stories
Use the correct props to start the tooltip open
This commit is contained in:
Tom Coleman
Michael Shilman
parent
0783e6d82a
commit
bb8b4a84f3
@ -1,23 +1,23 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import WithTooltip from './WithTooltip';
|
||||
import WithToolTip from './WithTooltip';
|
||||
|
||||
import TooltipLinkList from './TooltipLinkList';
|
||||
import StoryLinkWrapper from '../StoryLinkWrapper';
|
||||
|
||||
export const links = [
|
||||
{ title: 'Link', href: 'http://google.com' },
|
||||
{ title: 'Link', href: 'http://google.com' },
|
||||
{ title: 'callback', onClick: action('onClick') },
|
||||
{ id: '1', title: 'Link', href: 'http://google.com' },
|
||||
{ id: '2', title: 'Link', href: 'http://google.com' },
|
||||
{ id: '3', title: 'callback', onClick: action('onClick') },
|
||||
];
|
||||
|
||||
storiesOf('basics/Tooltip/TooltipLinkList', module)
|
||||
.addDecorator(storyFn => (
|
||||
<div style={{ height: '300px' }}>
|
||||
<WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
|
||||
<WithToolTip placement="top" trigger="click" tooltipShown tooltip={storyFn()}>
|
||||
<div>Tooltip</div>
|
||||
</WithTooltip>
|
||||
</WithToolTip>
|
||||
</div>
|
||||
))
|
||||
.add('links', () => <TooltipLinkList links={links.slice(0, 2)} LinkWrapper={StoryLinkWrapper} />)
|
||||
|
||||
@ -7,7 +7,7 @@ import TooltipMessage from './TooltipMessage';
|
||||
storiesOf('basics/Tooltip/TooltipMessage', module)
|
||||
.addDecorator(storyFn => (
|
||||
<div style={{ height: '300px' }}>
|
||||
<WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
|
||||
<WithTooltip placement="top" trigger="click" tooltipShown tooltip={storyFn()}>
|
||||
<div>Tooltip</div>
|
||||
</WithTooltip>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,13 @@ import TooltipNote from './TooltipNote';
|
||||
storiesOf('basics/Tooltip/TooltipNote', module)
|
||||
.addDecorator(storyFn => (
|
||||
<div style={{ height: '300px' }}>
|
||||
<WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>
|
||||
<WithTooltip
|
||||
hasChrome={false}
|
||||
placement="top"
|
||||
trigger="click"
|
||||
tooltipShown
|
||||
tooltip={storyFn()}
|
||||
>
|
||||
<div>Tooltip</div>
|
||||
</WithTooltip>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,108 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
|
||||
.emotion-8 {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
line-height: 18px;
|
||||
padding: 7px 15px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-4 + .emotion-4 {
|
||||
border-top: 1px solid #EEEEEE;
|
||||
}
|
||||
|
||||
.emotion-4 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-4:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.emotion-4:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.emotion-3 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emotion-9 {
|
||||
display: inline-block;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
bottom: -8px;
|
||||
top: autopx;
|
||||
right: autopx;
|
||||
left: autopx;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
@ -16,15 +113,152 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-9"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
/>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<a
|
||||
class="emotion-4"
|
||||
href="http://google.com"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
<span
|
||||
class="emotion-2"
|
||||
>
|
||||
Link
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="emotion-4"
|
||||
href="http://google.com"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
<span
|
||||
class="emotion-2"
|
||||
>
|
||||
Link
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
|
||||
.emotion-11 {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
line-height: 18px;
|
||||
padding: 7px 15px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-4 + .emotion-4 {
|
||||
border-top: 1px solid #EEEEEE;
|
||||
}
|
||||
|
||||
.emotion-4 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-4:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.emotion-4:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.emotion-3 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emotion-12 {
|
||||
display: inline-block;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
bottom: -8px;
|
||||
top: autopx;
|
||||
right: autopx;
|
||||
left: autopx;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
@ -35,5 +269,58 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-12"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
/>
|
||||
<div
|
||||
class="emotion-11"
|
||||
>
|
||||
<a
|
||||
class="emotion-4"
|
||||
href="http://google.com"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
<span
|
||||
class="emotion-2"
|
||||
>
|
||||
Link
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="emotion-4"
|
||||
href="http://google.com"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
<span
|
||||
class="emotion-2"
|
||||
>
|
||||
Link
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="emotion-4"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
<span
|
||||
class="emotion-2"
|
||||
>
|
||||
callback
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -6,6 +6,55 @@ exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emotion-6 {
|
||||
display: inline-block;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
bottom: -8px;
|
||||
top: autopx;
|
||||
right: autopx;
|
||||
left: autopx;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
padding: 15px;
|
||||
width: 280px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
color: #444444;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
@ -16,6 +65,32 @@ exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = `
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-6"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
/>
|
||||
<div
|
||||
class="emotion-5"
|
||||
>
|
||||
<div
|
||||
class="emotion-4"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
>
|
||||
Lorem ipsum dolor sit
|
||||
</div>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
Amet consectatur vestibulum concet durum politu coret weirom
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -25,6 +100,51 @@ exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
display: inline-block;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
bottom: -8px;
|
||||
top: autopx;
|
||||
right: autopx;
|
||||
left: autopx;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
padding: 15px;
|
||||
width: 280px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
color: #444444;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
@ -35,6 +155,27 @@ exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = `
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-5"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
/>
|
||||
<div
|
||||
class="emotion-4"
|
||||
>
|
||||
<div
|
||||
class="emotion-3"
|
||||
>
|
||||
<span
|
||||
class="emotion-2"
|
||||
>
|
||||
Amet consectatur vestibulum concet durum politu coret weirom
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -44,23 +185,63 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
<div>
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
|
||||
.emotion-0 {
|
||||
.emotion-8 {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
bottom: -8px;
|
||||
top: autopx;
|
||||
right: autopx;
|
||||
left: autopx;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
padding: 15px;
|
||||
width: 280px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
color: #444444;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.emotion-6 {
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emotion-6 > * {
|
||||
margin: 0 8px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
<div
|
||||
@ -73,5 +254,161 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-8"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
/>
|
||||
<div
|
||||
class="emotion-7"
|
||||
>
|
||||
<div
|
||||
class="emotion-4"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
>
|
||||
Lorem ipsum dolor sit
|
||||
</div>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
Amet consectatur vestibulum concet durum politu coret weirom
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-6"
|
||||
>
|
||||
<a
|
||||
class="emotion-3"
|
||||
href="test"
|
||||
>
|
||||
Continue
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
|
||||
.emotion-0 {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emotion-9 {
|
||||
display: inline-block;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
bottom: -8px;
|
||||
top: autopx;
|
||||
right: autopx;
|
||||
left: autopx;
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
padding: 15px;
|
||||
width: 280px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
color: #444444;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emotion-7 > * {
|
||||
margin: 0 8px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
<div>
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-9"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
/>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<div
|
||||
class="emotion-4"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
>
|
||||
Lorem ipsum dolor sit
|
||||
</div>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
Amet consectatur vestibulum concet durum politu coret weirom
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-7"
|
||||
>
|
||||
<a
|
||||
class="emotion-3"
|
||||
href="test"
|
||||
>
|
||||
Get more tips
|
||||
</a>
|
||||
<a
|
||||
class="emotion-3"
|
||||
href="test"
|
||||
>
|
||||
Done
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -6,6 +6,30 @@ exports[`Storyshots basics/Tooltip/TooltipNote default 1`] = `
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
display: inline-block;
|
||||
z-index: 2147483647;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
padding: 2px 6px;
|
||||
line-height: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
background: rgba(0,0,0,0.4);
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:300px"
|
||||
>
|
||||
@ -16,5 +40,15 @@ exports[`Storyshots basics/Tooltip/TooltipNote default 1`] = `
|
||||
Tooltip
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-2"
|
||||
style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
>
|
||||
Lorem ipsum dolor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -241,6 +241,29 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.emotion-12 {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.emotion-11 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-12"
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user