Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips Style #193

Merged
merged 8 commits into from
Dec 7, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Tweaking animations and style.
- Animations just ease-out with a slight delay (unless it’s a click action)
- Title looks more like a title
- Adjusted the overall <strong> elements and added bold weight of 700
cchaos committed Dec 7, 2017
commit 2baad775ccef72d427e8abc7e1d099cfb03587e5
20 changes: 9 additions & 11 deletions src-docs/src/views/tooltip/examples.js
Original file line number Diff line number Diff line change
@@ -14,17 +14,17 @@ export default () => (
<div>
<div style={{ overflow: 'hidden' }}>
Check out this {(
<TooltipTrigger tooltip="I am the body" title="I am the title">
<EuiLink>tooltip</EuiLink>
<TooltipTrigger tooltip={autoPlacementTooltip} title="I am the title" size="m">
<EuiLink>medium tooltip</EuiLink>
</TooltipTrigger>
)} with title.
)} with <strong>title</strong>.
</div>
<br/>
<br/>
<div>
Check out this {(
<TooltipTrigger tooltip={autoPlacementTooltip} placement="top" size="m">
<EuiLink>tooltip on the top.</EuiLink>
<TooltipTrigger tooltip="I should be on the top" placement="top" >
<EuiLink>tooltip on the <strong>top</strong>.</EuiLink>
</TooltipTrigger>
)}
</div>
@@ -33,7 +33,7 @@ export default () => (
<div>
Check out this {(
<TooltipTrigger tooltip={autoPlacementTooltip} placement="top" size="m" trigger="click">
<EuiLink>medium tooltip on click.</EuiLink>
<EuiLink> tooltip on <strong>click</strong>.</EuiLink>
</TooltipTrigger>
)}
</div>
@@ -42,7 +42,7 @@ export default () => (
<div>
Check out this {(
<TooltipTrigger tooltip={autoPlacementTooltip} placement="left" size="l">
<EuiLink>large tooltip on the left.</EuiLink>
<EuiLink>large tooltip on the <strong>left</strong>.</EuiLink>
</TooltipTrigger>
)}
</div>
@@ -51,18 +51,16 @@ export default () => (
<div>
Check out this {(
<TooltipTrigger tooltip="I should be on the right" placement="right">
<EuiLink>tooltip on the right.</EuiLink>
<EuiLink>tooltip on the <strong>right</strong>.</EuiLink>
</TooltipTrigger>
)}
</div>
<br/>
<br/>
<div>
Check out this {(
<TooltipTrigger tooltip="I should be on the bottom" placement="bottom">
<EuiLink>tooltip on the bottom.</EuiLink>
<EuiLink>tooltip on the <strong>bottom</strong>.</EuiLink>
</TooltipTrigger>
)}
</div>
</div>
);
29 changes: 19 additions & 10 deletions src/components/tooltip/_tooltip.scss
Original file line number Diff line number Diff line change
@@ -20,14 +20,22 @@
@include euiTooltipSize(30);
}

// ANIMATING
// ANIMATING -- with slight delay
transition:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd add a transition delay here. Just something so that the tooltip doesn't casually show if you're waving your mouse around a page. It's an easy way to make them not annoying and more directed.

opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
visibility $euiAnimSlightBounce $euiAnimSpeedSlow,
transform $euiAnimSlightBounce $euiAnimSpeedSlow;
opacity $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow,
visibility $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow,
transform $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow;
opacity: 0;
visibility: hidden;
transform: translateX(0) translateY($euiSizeL * -1) translateY(0);
transform: translateX(0) translateY($euiSize * -1) translateY(0); // default starting position of top

// Don't delay the animation if the tooltip is on click
.euiTooltip--click & {
transition:
opacity $euiAnimSpeedNormal ease-out,
visibility $euiAnimSpeedNormal ease-out,
transform $euiAnimSpeedNormal ease-out;
}

&.euiTooltip-isVisible {
opacity: 1;
@@ -39,15 +47,15 @@

// Starting positions
.euiTooltip--right & {
transform: translateX($euiSizeL) translateY(0) translateZ(0);
transform: translateX($euiSize) translateY(0) translateZ(0);
}

.euiTooltip--bottom & {
transform: translateX(0) translateY($euiSizeL) translateZ(0);
transform: translateX(0) translateY($euiSize) translateZ(0);
}

.euiTooltip--left & {
transform: translateX($euiSizeL * -1) translateY(0) translateZ(0);
transform: translateX($euiSize * -1) translateY(0) translateZ(0);
}
}

@@ -65,7 +73,7 @@
@include euiFontSizeS();
background-color: $background-color;
border-radius: $euiBorderRadius;
padding: $euiSize;
padding: $euiSizeM;
color: $text-color;
white-space: nowrap;

@@ -106,6 +114,7 @@
// The tooltip title if it exists
.euiTooltip__title {
@include euiFontSizeM;
font-weight: $euiFontWeightLight;
font-weight: $euiFontWeightMedium;
margin-bottom: $euiSizeS;
border-bottom: $euiBorderWidthThin solid $euiColorDarkShade;
}
3 changes: 2 additions & 1 deletion src/components/tooltip/tooltip_trigger.js
Original file line number Diff line number Diff line change
@@ -129,7 +129,8 @@ export class TooltipTrigger extends React.Component {

const newClasses = classnames('euiTooltip', className, {
'tooltip-light': theme === 'light',
[`euiTooltip--${this.state.noOverflowPlacement}`]: this.state.noOverflowPlacement !== 'top'
[`euiTooltip--${this.state.noOverflowPlacement}`]: this.state.noOverflowPlacement !== 'top',
[`euiTooltip--${trigger}`]: trigger !== 'hover',
});
const newProps = {
className: newClasses,
2 changes: 1 addition & 1 deletion src/global_styling/reset/_reset.scss
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ em {
}

strong {
font-weight: 500;
font-weight: $euiFontWeightBold;
}

/* HTML5 display-role reset for older browsers */
1 change: 1 addition & 0 deletions src/global_styling/variables/_typography.scss
Original file line number Diff line number Diff line change
@@ -42,6 +42,7 @@ $euiLineHeight: 1.5;
$euiFontWeightLight: 300;
$euiFontWeightRegular: 400;
$euiFontWeightMedium: 500;
$euiFontWeightBold: 700;

// Our base fonts