Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-03 04:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update tooltip examples and fix tooltip z-index

Browse source
This commit is contained in:
Marcos Moura 2016-09-19 20:35:30 -03:00
parent 97d61de4e7
commit bb5a7be84e
2 changed files with 67 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/mdTooltip/mdTooltip.scss
View file

@ -6,6 +6,7 @@ $tooltip-height: 20px;
height: $tooltip-height;
padding: 0 8px;
position: fixed;
z-index: 200;
pointer-events: none;
background-color: rgba(#616161, .87);
border-radius: 2px;
@ -27,6 +28,10 @@ $tooltip-height: 20px;
transition-duration: .3s;
}
&:not(.md-active) {
transition-delay: 0s !important;
}
&.md-tooltip-top {
margin-top: -14px;
transform: translate(-50%, 8px);

115
src/docs/pages/Tooltip.vue
View file

@ -1,71 +1,80 @@
<template>
<div>
<section>
<h2 class="title">Tooltip</h2>
<demo-page>
<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>
<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-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-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-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</demo-example>
<md-avatar class="md-avatar-icon">
<md-icon>person</md-icon>
<md-tooltip md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</section>
<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>
<section>
<h2 class="title">Tooltip - Delay</h2>
<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>
<div>
<md-button class="md-icon-button md-raised md-primary">
<md-icon>folder</md-icon>
<md-tooltip md-delay="500" md-direction="top">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-delay="400" md-direction="left">My tooltip</md-tooltip>
</md-button>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
<md-tooltip md-delay="500" md-direction="bottom">My tooltip</md-tooltip>
</md-avatar>
</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>
</demo-example>
</div>
<div>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>home</md-icon>
<md-tooltip md-delay="500" md-direction="left">My tooltip</md-tooltip>
</md-button>
<div slot="code">
<h2>Code</h2>
</div>
<md-avatar class="md-avatar-icon">
<md-icon>person</md-icon>
<md-tooltip md-delay="500" md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
</section>
</div>
<div slot="api">
</div>
</demo-page>
</template>
<style lang="scss" scoped>
section {
margin-left: 100px;
margin-bottom: 32px;
}
.md-button,
.md-avatar {
margin: 24px;
}
</style>
<script>
export default {
mounted() {
this.$root.pageTitle = 'Tooltip';
}
};
</script>