Skip to content

Commit d408c15

Browse files
nolimits4webnolimits4web
committed
Phenome: Tooltip demos
1 parent c45fc9d commit d408c15

File tree

8 files changed

+129
-2
lines changed

8 files changed

+129
-2
lines changed

‎kitchen-sink/react/src/pages/elevation.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Page, Navbar, BlockTitle, Block, Row, Col } from 'framework7-react';
44
export default () => (
55
<Page>
66
<Navbar title="Elevation" backLink="Back"></Navbar>
7-
<Block>
7+
<Block strong>
88
<p>Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 1 to 24.</p>
99
<p>Elevation can be added to any element by adding <code>elevation-1</code>, <code>elevation-2</code>, ..., <code>elevation-24</code> classes</p>
1010
</Block>

‎kitchen-sink/react/src/pages/home.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,9 @@ export default () => (
181181
<ListItem link="/toolbar-tabbar/" title="Toolbar & Tabbar">
182182
<Icon slot="media" icon="icon-f7" />
183183
</ListItem>
184+
<ListItem link="/tooltip/" title="Tooltip">
185+
<Icon slot="media" icon="icon-f7" />
186+
</ListItem>
184187
<ListItem link="/virtual-list/" title="Virtual List">
185188
<Icon slot="media" icon="icon-f7" />
186189
</ListItem>

‎kitchen-sink/react/src/pages/tooltip.jsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { Navbar, NavRight, Page, Link, Icon, Block, BlockTitle, Button } from 'framework7-react';
3+
4+
export default class extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
}
8+
render() {
9+
return (
10+
<Page onPageInit={this.onPageInit.bind(this)} onPageBeforeRemove={this.onPageBeforeRemove.bind(this)}>
11+
<Navbar title="Action Sheet" backLink="Back">
12+
<NavRight>
13+
<Link className="navbar-tooltip">
14+
<Icon ios="f7:info" md="material:info_outline" />
15+
</Link>
16+
</NavRight>
17+
</Navbar>
18+
<Block strong>
19+
<p>Tooltips display informative text when users hover over, focus on, or tap an element.</p>
20+
<p>Tooltip can be positioned around any element with any HTML content inside.</p>
21+
</Block>
22+
<Block strong>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia augue urna, in tincidunt augue hendrerit ut. In nulla massa, facilisis non consectetur a, tempus semper ex. Proin eget volutpat nisl. Integer lacinia maximus nunc molestie viverra. <Icon className="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> Etiam ullamcorper ultricies ipsum, ut congue tortor rutrum at. Vestibulum rutrum risus a orci dictum, in placerat leo finibus. Sed a congue enim, ut dictum felis. Aliquam erat volutpat. Etiam id nisi in magna egestas malesuada. Sed vitae orci sollicitudin, accumsan nisi a, bibendum felis. Maecenas risus libero, gravida ut tincidunt auctor, <Icon className="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> aliquam non lectus. Nam laoreet turpis erat, eget bibendum leo suscipit nec.</p>
24+
<p>Vestibulum <Icon className="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> gravida dui magna, eget pulvinar ligula molestie hendrerit. Mauris vitae facilisis justo. Nam velit mi, pharetra sit amet luctus quis, consectetur a tellus. Maecenas ac magna sit amet eros aliquam rhoncus. Ut dapibus vehicula lectus, ac blandit felis ultricies at. In sollicitudin, lorem eget volutpat viverra, magna <Icon className="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> felis tempus nisl, porta consectetur nunc neque eget risus. Phasellus vestibulum leo at ante ornare, vel congue justo tincidunt.</p>
25+
<p>Praesent tempus enim id lectus porta, at rutrum purus imperdiet. Donec eget sem vulputate, scelerisque diam nec, consequat turpis. Ut vel convallis felis. Integer <Icon className="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> neque ex, sollicitudin vitae magna eget, ultrices volutpat dui. Sed placerat odio hendrerit consequat lobortis. Fusce pulvinar facilisis rhoncus. Sed erat ipsum, consequat molestie suscipit vitae, malesuada a <Icon className="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> massa.</p>
26+
</Block>
27+
28+
<BlockTitle>Auto Initialization</BlockTitle>
29+
<Block strong>
30+
<p>For simple cases when you don't need a lot of control over the Tooltip, it can be set on buttons and links automatically with <code>tooltip</code> prop: <Button round outline small style={{display: 'inline-block'}} tooltip="Button tooltip text">Button with Tooltip</Button></p>
31+
</Block>
32+
</Page>
33+
)
34+
}
35+
onPageInit() {
36+
const self = this;
37+
const app = self.$f7;
38+
self.iconTooltip = app.tooltip.create({
39+
el: '.icon-tooltip',
40+
text: 'Tooltip text',
41+
});
42+
self.navbarTooltip = app.tooltip.create({
43+
el: '.navbar-tooltip',
44+
text: 'One more tooltip<br>with more text<br><em>and custom formatting</em>'
45+
});
46+
}
47+
onPageBeforeRemove() {
48+
var self = this;
49+
if (self.iconTooltip) self.iconTooltip.destroy();
50+
if (self.navbarTooltip) self.navbarTooltip.destroy();
51+
}
52+
}

‎kitchen-sink/react/src/routes.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ import Tabbar from './pages/tabbar.jsx';
8484
import TabbarLabels from './pages/tabbar-labels.jsx';
8585
import TabbarScrollable from './pages/tabbar-scrollable.jsx';
8686
import ToolbarHideScroll from './pages/toolbar-hide-scroll.jsx';
87+
import Tooltip from './pages/tooltip.jsx';
8788
import Timeline from './pages/timeline.jsx';
8889
import TimelineVertical from './pages/timeline-vertical.jsx';
8990
import TimelineHorizontal from './pages/timeline-horizontal.jsx';
@@ -539,6 +540,10 @@ export default [
539540
},
540541
],
541542
},
543+
{
544+
path: '/tooltip/',
545+
component: Tooltip,
546+
},
542547
{
543548
path: '/timeline/',
544549
component: Timeline,

‎kitchen-sink/vue/src/pages/elevation.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<f7-page>
33
<f7-navbar title="Elevation" back-link="Back"></f7-navbar>
4-
<f7-block>
4+
<f7-block strong>
55
<p>Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 1 to 24.</p>
66
<p>Elevation can be added to any element by adding <code>elevation-1</code>, <code>elevation-2</code>, ..., <code>elevation-24</code> classes</p>
77
</f7-block>

‎kitchen-sink/vue/src/pages/home.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,9 @@
178178
<f7-list-item link="/toolbar-tabbar/" title="Toolbar & Tabbar">
179179
<f7-icon slot="media" icon="icon-f7"></f7-icon>
180180
</f7-list-item>
181+
<f7-list-item link="/tooltip/" title="Tooltip">
182+
<f7-icon slot="media" icon="icon-f7"></f7-icon>
183+
</f7-list-item>
181184
<f7-list-item link="/virtual-list/" title="Virtual List">
182185
<f7-icon slot="media" icon="icon-f7"></f7-icon>
183186
</f7-list-item>

‎kitchen-sink/vue/src/pages/tooltip.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<f7-page @page:init="onPageInit" @page:beforeremove="onPageBeforeRemove">
3+
<f7-navbar title="Action Sheet" back-link="Back">
4+
<f7-nav-right>
5+
<f7-link class="navbar-tooltip">
6+
<f7-icon ios="f7:info" md="material:info_outline" />
7+
</f7-link>
8+
</f7-nav-right>
9+
</f7-navbar>
10+
<f7-block strong>
11+
<p>Tooltips display informative text when users hover over, focus on, or tap an element.</p>
12+
<p>Tooltip can be positioned around any element with any HTML content inside.</p>
13+
</f7-block>
14+
<f7-block strong>
15+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia augue urna, in tincidunt augue hendrerit ut. In nulla massa, facilisis non consectetur a, tempus semper ex. Proin eget volutpat nisl. Integer lacinia maximus nunc molestie viverra. <f7-icon class="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> Etiam ullamcorper ultricies ipsum, ut congue tortor rutrum at. Vestibulum rutrum risus a orci dictum, in placerat leo finibus. Sed a congue enim, ut dictum felis. Aliquam erat volutpat. Etiam id nisi in magna egestas malesuada. Sed vitae orci sollicitudin, accumsan nisi a, bibendum felis. Maecenas risus libero, gravida ut tincidunt auctor, <f7-icon class="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> aliquam non lectus. Nam laoreet turpis erat, eget bibendum leo suscipit nec.</p>
16+
<p>Vestibulum <f7-icon class="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> gravida dui magna, eget pulvinar ligula molestie hendrerit. Mauris vitae facilisis justo. Nam velit mi, pharetra sit amet luctus quis, consectetur a tellus. Maecenas ac magna sit amet eros aliquam rhoncus. Ut dapibus vehicula lectus, ac blandit felis ultricies at. In sollicitudin, lorem eget volutpat viverra, magna <f7-icon class="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> felis tempus nisl, porta consectetur nunc neque eget risus. Phasellus vestibulum leo at ante ornare, vel congue justo tincidunt.</p>
17+
<p>Praesent tempus enim id lectus porta, at rutrum purus imperdiet. Donec eget sem vulputate, scelerisque diam nec, consequat turpis. Ut vel convallis felis. Integer <f7-icon class="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> neque ex, sollicitudin vitae magna eget, ultrices volutpat dui. Sed placerat odio hendrerit consequat lobortis. Fusce pulvinar facilisis rhoncus. Sed erat ipsum, consequat molestie suscipit vitae, malesuada a <f7-icon class="icon-tooltip" ios="f7:info_fill" md="material:info" color="blue" /> massa.</p>
18+
</f7-block>
19+
<f7-block-title>Auto Initialization</f7-block-title>
20+
<f7-block strong>
21+
<p>For simple cases when you don't need a lot of control over the Tooltip, it can be set on buttons and links automatically with <code>tooltip</code> prop: <f7-button round outline small style="display: inline-block" tooltip="Button tooltip text">Button with Tooltip</f7-button></p>
22+
</f7-block>
23+
</f7-page>
24+
</template>
25+
<script>
26+
import { f7Page, f7Navbar, f7NavRight, f7Link, f7Icon, f7Block, f7BlockTitle, f7Button } from 'framework7-vue';
27+
28+
export default {
29+
components: {
30+
f7Page,
31+
f7Navbar,
32+
f7NavRight,
33+
f7Link,
34+
f7Icon,
35+
f7Block,
36+
f7BlockTitle,
37+
f7Button,
38+
},
39+
methods: {
40+
onPageInit() {
41+
const self = this;
42+
const app = self.$f7;
43+
self.iconTooltip = app.tooltip.create({
44+
el: '.icon-tooltip',
45+
text: 'Tooltip text',
46+
});
47+
self.navbarTooltip = app.tooltip.create({
48+
el: '.navbar-tooltip',
49+
text: 'One more tooltip<br>with more text<br><em>and custom formatting</em>'
50+
});
51+
},
52+
onPageBeforeRemove() {
53+
var self = this;
54+
if (self.iconTooltip) self.iconTooltip.destroy();
55+
if (self.navbarTooltip) self.navbarTooltip.destroy();
56+
}
57+
},
58+
};
59+
</script>

‎kitchen-sink/vue/src/routes.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ import Tabbar from './pages/tabbar.vue';
8585
import TabbarLabels from './pages/tabbar-labels.vue';
8686
import TabbarScrollable from './pages/tabbar-scrollable.vue';
8787
import ToolbarHideScroll from './pages/toolbar-hide-scroll.vue';
88+
import Tooltip from './pages/tooltip.vue';
8889
import Timeline from './pages/timeline.vue';
8990
import TimelineVertical from './pages/timeline-vertical.vue';
9091
import TimelineHorizontal from './pages/timeline-horizontal.vue';
@@ -541,6 +542,10 @@ export default [
541542
},
542543
],
543544
},
545+
{
546+
path: '/tooltip/',
547+
component: Tooltip,
548+
},
544549
{
545550
path: '/timeline/',
546551
component: Timeline,

0 commit comments

Comments
 (0)