Skip to content

Commit

Permalink
Merge pull request #15 from Tradeshift/lza/tooltip
Browse files Browse the repository at this point in the history
Lza/tooltip
  • Loading branch information
zdlm authored Apr 4, 2019
2 parents b75e208 + e42ab1d commit fb3567a
Show file tree
Hide file tree
Showing 9 changed files with 277 additions and 48 deletions.
18 changes: 18 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
coreEl.onload = function() {
var scripts = [
'/packages/components/root/lib/root.umd.js',
'/packages/components/tooltip/lib/tooltip.umd.js',
'/packages/components/button/lib/button.umd.js',
'/packages/components/button-group/lib/button-group.umd.js'
];
Expand All @@ -49,6 +50,7 @@
});
</script>
</head>

<body>
<ts-root>
<header slot="header" class="header">Header</header>
Expand Down Expand Up @@ -137,6 +139,22 @@ <h2>ts-button-group</h2>
<ts-button>Normal Button</ts-button>
</ts-button-group>
</article>

<article>
<h2>ts-tooltip</h2>
<ts-tooltip tooltip="tooltip on the right" position="right">
<ts-button>Right</ts-button>
</ts-tooltip>
<ts-tooltip tooltip="tooltip on the top" position="top">
<ts-button>Top</ts-button>
</ts-tooltip>
<ts-tooltip tooltip="tooltip on the bottom" position="bottom">
<ts-button>Bottom</ts-button>
</ts-tooltip>
<ts-tooltip tooltip="tooltip on the left" position="left">
<ts-button>Left</ts-button>
</ts-tooltip>
</article>
</ts-root>
</body>
</html>
47 changes: 17 additions & 30 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,8 @@
"@tradeshift/elements": "file:packages/core",
"@tradeshift/elements.button": "file:packages/components/button",
"@tradeshift/elements.button-group": "file:packages/components/button-group",
"@tradeshift/elements.root": "file:packages/components/root"
"@tradeshift/elements.root": "file:packages/components/root",
"@tradeshift/elements.tooltip": "file:packages/components/tooltip"
},
"repository": "github:Tradeshift/elements.git",
"publishConfig": {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/button/src/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}
&:hover {
cursor: pointer;
background: rgba(var(--ts-color-gray-rgb), 0.5);
background: var(--ts-color-gray-lighter);
}
&:focus:before {
display: block;
Expand Down
14 changes: 14 additions & 0 deletions packages/components/tooltip/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "@tradeshift/elements.tooltip",
"version": "0.1.1",
"src": "src/tooltip.js",
"main": "lib/tooltip.cjs.js",
"module": "lib/tooltip.mjs",
"browser": "lib/tooltip.umd.js",
"files": [
"lib/*"
],
"dependencies": {
"@tradeshift/elements": "file:../../core"
}
}
61 changes: 61 additions & 0 deletions packages/components/tooltip/src/tooltip.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
:host {
position: relative;
cursor: pointer;
&:before {
position: absolute;
display: inline-block;
align-items: center;
background: var(--ts-color-black);
border-radius: var(--ts-radius);
color: var(--ts-color-white);
padding: 0 var(--ts-unit-half);
height: var(--ts-unit-double);
line-height: var(--ts-unit-double);
content: attr(tooltip);
justify-content: center;
opacity: 0;
overflow: hidden;
pointer-events: none;
z-index: var(--ts-zindex-max);
transition: var(--ts-transition-fast) ease opacity;
transition-delay: var(--ts-transition-fast);
}
}

:host(:hover) {
&:before {
opacity: 1;
transition: var(--ts-transition-fast) ease opacity;
transition-delay: var(--ts-transition-fast);
}
}

:host([position='right']) {
&:before {
bottom: calc(50% - var(--ts-unit));
left: 115%;
}
}

:host([position='left']) {
&:before {
bottom: calc(50% - var(--ts-unit));
right: 115%;
}
}

:host([position='top']) {
&:before {
bottom: 115%;
left: 50%;
transform: translate(-50%, 0);
}
}

:host([position='bottom']) {
&:before {
top: 115%;
left: 50%;
transform: translate(-50%, 0);
}
}
39 changes: 39 additions & 0 deletions packages/components/tooltip/src/tooltip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { TSElement, unsafeCSS, html } from '@tradeshift/elements';
import css from './tooltip.css';

customElements.define(
'ts-tooltip',
class extends TSElement {
static get styles() {
return [TSElement.styles, unsafeCSS(css)];
}

static get properties() {
return {
tooltip: { type: String, reflect: true },
position: { type: String, reflect: true },
width: { type: String, reflect: true }
};
}

constructor() {
super();
this.tooltip = '';
this.position = 'right';
this.width = 'max-content';
}

render() {
return html`
<style>
:host::before {
width: ${this.width};
}
</style>
<div>
<slot></slot>
</div>
`;
}
}
);
Loading

0 comments on commit fb3567a

Please sign in to comment.