Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-17 19:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

create tooltip documentation with the new template

Browse source
This commit is contained in:
Marcos Moura 2016-11-25 19:13:12 -02:00
parent 8da2745943
commit 487eb83bf7
3 changed files with 145 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

224
docs/src/pages/components/Tooltip.vue
View file

@ -1,113 +1,153 @@
<template>
<demo-page label="Components - Tooltip">
<div slot="examples">
<demo-example label="Default">
<div>
<md-button class="md-icon-button md-raised md-primary">
<md-icon>folder</md-icon>
<md-tooltip md-direction="top">My tooltip</md-tooltip>
</md-button>
<page-content page-title="Components - Tooltip">
<docs-component>
<div slot="description">
<p>Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.</p>
</div>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
<md-tooltip md-direction="bottom">My tooltip</md-tooltip>
</md-avatar>
</div>
<div slot="api">
<api-table name="md-tooltip">
<md-table slot="properties">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<div>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>home</md-icon>
<md-tooltip md-direction="left">My tooltip</md-tooltip>
</md-button>
<md-table-body>
<md-table-row>
<md-table-cell>md-direction</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the direction position of the parent element. <br>Default: <code>bottom</code> <br>Accepts: <code>top</code>|<code>right</code>|<code>bottom</code>|<code>left</code></md-table-cell>
</md-table-row>
<md-avatar class="md-avatar-icon">
<md-icon>person</md-icon>
<md-tooltip md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</demo-example>
<md-table-row>
<md-table-cell>md-delay</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Sets the delay to show the tooltip in ms. <br>Default: <code>0</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
<demo-example label="Delay - 400ms">
<div>
<md-button class="md-icon-button md-raised md-primary">
<md-icon>folder</md-icon>
<md-tooltip md-delay="400" md-direction="top">My tooltip</md-tooltip>
</md-button>
<div slot="example">
<example-box card-title="Default">
<div slot="demo">
<div>
<md-button class="md-icon-button md-raised md-primary">
<md-icon>folder</md-icon>
<md-tooltip md-direction="top">My tooltip</md-tooltip>
</md-button>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
<md-tooltip md-delay="400" md-direction="bottom">My tooltip</md-tooltip>
</md-avatar>
</div>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
<md-tooltip md-direction="bottom">My tooltip</md-tooltip>
</md-avatar>
</div>
<div>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>home</md-icon>
<md-tooltip md-delay="400" md-direction="left">My tooltip</md-tooltip>
</md-button>
<div>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>home</md-icon>
<md-tooltip md-direction="left">My tooltip</md-tooltip>
</md-button>
<md-avatar class="md-avatar-icon">
<md-icon>person</md-icon>
<md-tooltip md-delay="400" md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</demo-example>
</div>
<md-avatar class="md-avatar-icon">
<md-icon>person</md-icon>
<md-tooltip md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</div>
<div slot="code">
<demo-example label="Default">
<code-block lang="xml">
&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
&lt;md-icon&gt;folder&lt;/md-icon&gt;
&lt;md-tooltip md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
<div slot="code">
<code-block lang="xml">
&lt;div&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
&lt;md-icon&gt;folder&lt;/md-icon&gt;
&lt;md-tooltip md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
&lt;md-avatar&gt;
&lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
&lt;md-tooltip md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
&lt;md-avatar&gt;
&lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
&lt;md-tooltip md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
&lt;/div&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;md-tooltip md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
&lt;div&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;md-tooltip md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
&lt;md-icon&gt;person&lt;/md-icon&gt;
&lt;md-tooltip md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
</code-block>
</demo-example>
&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
&lt;md-icon&gt;person&lt;/md-icon&gt;
&lt;md-tooltip md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
&lt;/div&gt;
</code-block>
</div>
</example-box>
<demo-example label="Delay - 400ms">
<code-block lang="xml">
&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
&lt;md-icon&gt;folder&lt;/md-icon&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
<example-box card-title="Delay">
<div slot="demo">
<div>
<md-button class="md-icon-button md-raised md-primary">
<md-icon>folder</md-icon>
<md-tooltip md-delay="400" md-direction="top">My tooltip</md-tooltip>
</md-button>
&lt;md-avatar&gt;
&lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
<md-tooltip md-delay="400" md-direction="bottom">My tooltip</md-tooltip>
</md-avatar>
</div>
&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
<div>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>home</md-icon>
<md-tooltip md-delay="400" md-direction="left">My tooltip</md-tooltip>
</md-button>
&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
&lt;md-icon&gt;person&lt;/md-icon&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
</code-block>
</demo-example>
</div>
<md-avatar class="md-avatar-icon">
<md-icon>person</md-icon>
<md-tooltip md-delay="400" md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</div>
<div slot="api">
<div slot="code">
<code-block lang="xml">
&lt;div&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
&lt;md-icon&gt;folder&lt;/md-icon&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;top&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
</div>
</demo-page>
&lt;md-avatar&gt;
&lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;bottom&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;left&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-button&gt;
&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
&lt;md-icon&gt;person&lt;/md-icon&gt;
&lt;md-tooltip md-delay=&quot;400&quot; md-direction=&quot;right&quot;&gt;My tooltip&lt;/md-tooltip&gt;
&lt;/md-avatar&gt;
&lt;/div&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>

2
src/components/mdTable/mdTable.scss
View file

@ -165,7 +165,7 @@
}
.md-table-cell-container {
padding: 0 32px 0 24px;
padding: 6px 32px 6px 24px;
}
.md-button {

21
src/components/mdTooltip/mdTooltip.vue
View file

@ -117,16 +117,19 @@
},
open() {
this.removeTooltips();
this.rootElement.appendChild(this.tooltipElement);
getComputedStyle(this.tooltipElement).top;
this.transitionOff = true;
this.generateTooltipClasses();
this.calculateTooltipPosition();
window.setTimeout(() => {
this.transitionOff = false;
this.active = true;
}, 10);
this.$nextTick(() => {
this.rootElement.appendChild(this.tooltipElement);
getComputedStyle(this.tooltipElement).top;
this.transitionOff = true;
this.generateTooltipClasses();
this.calculateTooltipPosition();
window.setTimeout(() => {
this.transitionOff = false;
this.active = true;
}, 10);
});
},
close() {
let cleanupElements = () => {