mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +02:00
Code Issues Releases Wiki Activity

Merge pull request #92 from phuoc-ng/tooltip

Browse Source 
Add tooltip pattern
This commit is contained in:
phuoc-ng
2019-12-18 21:24:55 +07:00
committed by GitHub
parent 11583aa83b d716b70ef9
commit 6e60a061e5
7 changed files with 221 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -64,6 +64,7 @@ enum Pattern {
Tab = 'Tab',
Timeline = 'Timeline',
TogglePasswordVisibility = 'Toggle password visibility',
Tooltip = 'Tooltip',
UploadButton = 'Upload button',
ValidationIcon = 'Validation icon',
VideoBackground = 'Video background',

1
client/pages/ExplorePage.tsx
View File

@@ -173,6 +173,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.ResizableElement} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.Tooltip} />
<CoverCard pattern={Pattern.ValidationIcon} />
</div>
</section>

4
client/patterns/popover-arrow/Details.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -421,6 +423,8 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.Tooltip]} />
</DetailsLayout>
);
};

58
client/patterns/tooltip/Cover.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
position: 'relative',
width: '60%',
}}
>
<div
style={{
border: '4px solid transparent',
borderTopColor: '#00439e',
bottom: '100%',
height: 0,
left: '50%',
position: 'absolute',
transform: 'translate(-50%, 4px)',
width: 0,
zIndex: 10,
}}
/>
<div
style={{
backgroundColor: '#00439e',
borderRadius: '2px',
bottom: '100%',
height: '24px',
left: '50%',
position: 'absolute',
transform: 'translate(-50%, -4px)',
width: '80px',
zIndex: 10,
}}
/>
<Rectangle height={16} />
</div>
</div>
</Frame>
);
};
export default Cover;

127
client/patterns/tooltip/Details.tsx Normal file
View File

@@ -0,0 +1,127 @@
import React from 'react';
import './tooltip.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Tooltip">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Move the mouser over the main element to see the tooltip.
</div>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-tooltip"
style={{
marginBottom: '16px',
width: '150px',
}}
>
<div
className="p-tooltip-content"
style={{
padding: '8px',
width: '200px',
}}
>
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
</div>
<div className="p-tooltip-arrow" />
<Rectangle height={32} />
</div>
</div>
)}
source={`
<style>
.p-tooltip {
/* Used to position the arrow */
position: relative;
}
/* Show the arrow and content when hovering the trigger element */
.p-tooltip:hover .p-tooltip-arrow,
.p-tooltip:hover .p-tooltip-content {
opacity: 1;
}
.p-tooltip-arrow {
/* Invisible by default */
opacity: 0;
/* Border */
border: 8px solid transparent;
border-top-color: #00439e;
/* Position */
bottom: 100%;
left: 50%;
position: absolute;
transform: translate(-50%, 8px);
/* Zero size */
height: 0;
width: 0;
/* Displayed on top of other element */
z-index: 10;
}
.p-tooltip-content {
/* Invisible by default */
opacity: 0;
/* Background color, must be the same as the border color of arrow */
background-color: #00439e;
border-radius: 2px;
/* Position */
bottom: 100%;
left: 50%;
position: absolute;
transform: translate(-50%, -8px);
/* Displayed on top of other element */
z-index: 10;
}
</style>
<div class="p-tooltip">
<!-- The tooltip content -->
<div class="p-tooltip-content">
...
</div>
<!-- The tooltip arrow -->
<div class="p-tooltip-arrow" />
<!-- The trigger element -->
...
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
</DetailsLayout>
);
};
export default Details;

29
client/patterns/tooltip/tooltip.css Normal file
View File

@@ -0,0 +1,29 @@
.p-tooltip {
position: relative;
}
.p-tooltip:hover .p-tooltip-arrow,
.p-tooltip:hover .p-tooltip-content {
opacity: 1;
}
.p-tooltip-arrow {
border: 8px solid transparent;
border-top-color: #00439e;
bottom: 100%;
height: 0;
left: 50%;
opacity: 0;
position: absolute;
transform: translate(-50%, 8px);
width: 0;
z-index: 10;
}
.p-tooltip-content {
background-color: #00439e;
border-radius: 2px;
bottom: 100%;
left: 50%;
opacity: 0;
position: absolute;
transform: translate(-50%, -8px);
z-index: 10;
}

1
public/sitemap.xml
View File

@@ -65,6 +65,7 @@
<url><loc>https://csslayout.io/patterns/tab</loc></url>
<url><loc>https://csslayout.io/patterns/timeline</loc></url>
<url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
<url><loc>https://csslayout.io/patterns/tooltip</loc></url>
<url><loc>https://csslayout.io/patterns/upload-button</loc></url>
<url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
<url><loc>https://csslayout.io/patterns/video-background</loc></url>