Skip to content

Commit

Permalink
fixes #13 and #7
Browse files Browse the repository at this point in the history
  • Loading branch information
@notwaldorf
notwaldorf committed Jul 31, 2015
1 parent 0f7e959 commit 8b5aaa8
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 8 deletions.
5 changes: 2 additions & 3 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../paper-tooltip.html">
<link rel="import" href="test-button.html">

<style is="custom-style">
.horizontal-section {
min-width: 120px;
position: relative;
}

.with-tooltip {
Expand Down Expand Up @@ -107,12 +107,11 @@ <h4>Anchored to native elements</h4>
<div>
<h4>Anchored to custom elements</h4>
<div class="horizontal-section">
<paper-icon-button id="menu" icon="menu" alt="menu"></paper-icon-button>
<test-button></test-button>
<paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
<paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>

<paper-tooltip for="menu" margin-top="0">hot dogs</paper-tooltip>
<paper-tooltip for="heart" margin-top="0">&lt;3 &lt;3 &lt;3 </paper-tooltip>
<paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
Expand Down
36 changes: 36 additions & 0 deletions demo/test-button.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../paper-tooltip.html">

<dom-module id="test-button">
<style>
:host {
display: inline-block;
}

paper-icon-button {
padding: 0;
}
</style>
<template>
<paper-icon-button id="m" icon="menu" alt="menu"></paper-icon-button>
<paper-tooltip for="m" margin-top="8">hot dogs</paper-tooltip>
</template>

<script>
Polymer({
is: 'test-button'
});
</script>
</dom-module>
26 changes: 21 additions & 5 deletions paper-tooltip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,16 +140,24 @@
* of the tooltip.
*/
get target () {
var ownerRoot = Polymer.dom(this).getOwnerRoot();
var parentNode = Polymer.dom(this).parentNode;
// If the parentNode is a document fragment, then we need to use the host.
var ownerRoot = Polymer.dom(this).getOwnerRoot();

var target;

if (this.for) {
target = parentNode.querySelector('#' + this.for);
} else if (parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
target = ownerRoot.host;
// The element we are looking can be the tooltip's sibling in
// either a custom element, or in a native element. If it's in
// a custom element, it would be inside the shadow root, so
// a plain querySelector would not work.
if (parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
target = ownerRoot.host.$[this.for];
} else {
target = parentNode.querySelector('#' + this.for);
}
} else {
target = parentNode;
target = parentNode.nodeType == 11 ? ownerRoot.host : parentNode;
}

return target;
Expand All @@ -174,6 +182,11 @@
},

show: function() {
if (this._showing)
return;

this.cancelAnimation();

this.$.tooltip.hidden = false;
this._setPosition();
this._showing = true;
Expand All @@ -182,6 +195,9 @@
},

hide: function() {
if (!this._showing)
return;

this._showing = false;
this.playAnimation('exit');
},
Expand Down
92 changes: 92 additions & 0 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,24 @@

<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-tooltip.html">
<link rel="import" href="test-button.html">

</head>
<style>
body {
margin: 0;
padding: 0;
}
#target {
width: 100px;
height: 20px;
background-color: red;
}
paper-tooltip {
width: 70px;
}
</style>

<body>

<test-fixture id="basic">
Expand All @@ -34,6 +50,12 @@
</template>
</test-fixture>

<test-fixture id="custom">
<template>
<test-button></test-button>
</template>
</test-fixture>

<script>
suite('basic', function() {
var f, tooltip, target;
Expand All @@ -52,6 +74,32 @@
assert.isFalse(actualTooltip.hidden);
});

test('tooltip is positioned correctly', function() {
var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip');
assert.isTrue(actualTooltip.hidden);

MockInteractions.focus(target);
assert.isFalse(actualTooltip.hidden);

var divRect = target.getBoundingClientRect();
expect(divRect.width).to.be.equal(100);
expect(divRect.height).to.be.equal(20);

var contentRect = tooltip.getBoundingClientRect();
expect(contentRect.width).to.be.equal(70);
expect(contentRect.height).to.be.equal(29);

// The target div width is 100, and the tooltip width is 70, and
// it's centered. The height of the target div is 20, and the
// tooltip is 14px below.
expect(contentRect.left).to.be.equal((100 - 70)/2);
expect(contentRect.top).to.be.equal(20 + 14);

// Also check the math, just in case.
expect(contentRect.left).to.be.equal((divRect.width - contentRect.width)/2);
expect(contentRect.top).to.be.equal(divRect.height + tooltip.marginTop);
});

test('tooltip is hidden after target is blurred', function(done) {
var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip');
assert.isTrue(actualTooltip.hidden);
Expand Down Expand Up @@ -85,6 +133,50 @@
});
});

suite('tooltip is inside a custom element', function() {
var f, tooltip, target;

setup(function() {
f = fixture('custom');
target = f.$.button;
tooltip = f.$.tooltip;
});

test('tooltip is shown when target is focused', function() {
var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip');
assert.isTrue(actualTooltip.hidden);

MockInteractions.focus(target);
assert.isFalse(actualTooltip.hidden);
});

test('tooltip is positioned correctly', function() {
var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip');
assert.isTrue(actualTooltip.hidden);

MockInteractions.focus(target);
assert.isFalse(actualTooltip.hidden);

var divRect = target.getBoundingClientRect();
expect(divRect.width).to.be.equal(100);
expect(divRect.height).to.be.equal(20);

var contentRect = tooltip.getBoundingClientRect();
expect(contentRect.width).to.be.equal(70);
expect(contentRect.height).to.be.equal(29);

// The target div width is 100, and the tooltip width is 70, and
// it's centered. The height of the target div is 20, and the
// tooltip is 14px below.
expect(contentRect.left).to.be.equal((100 - 70)/2);
expect(contentRect.top).to.be.equal(20 + 14);

// Also check the math, just in case.
expect(contentRect.left).to.be.equal((divRect.width - contentRect.width)/2);
expect(contentRect.top).to.be.equal(divRect.height + tooltip.marginTop);
});
});

suite('a11y', function() {
test('has aria role "tooltip"', function() {
var f = fixture('basic');
Expand Down

0 comments on commit 8b5aaa8

Please sign in to comment.