Skip to content

Commit 3c645cc

Browse files
nolimits4webnolimits4web
committed
Core: Tooltip demos
1 parent d601a27 commit 3c645cc

File tree

5 files changed

+83
-4
lines changed

5 files changed

+83
-4
lines changed

‎kitchen-sink/core/index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="theme-color" content="#2196f3">
99
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
1010
<title>Framework7</title>
11-
<link rel="stylesheet" href="../../build/core/css/framework7.css">
11+
<link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
1212
<link rel="stylesheet" href="css/app.css">
1313
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
1414
<link rel="icon" href="img/f7-icon.png">
@@ -554,6 +554,14 @@
554554
</div>
555555
</a>
556556
</li>
557+
<li>
558+
<a class="item-content item-link" href="/tooltip/">
559+
<div class="item-media"><i class="icon icon-f7"></i></div>
560+
<div class="item-inner">
561+
<div class="item-title">Tooltip</div>
562+
</div>
563+
</a>
564+
</li>
557565
<li>
558566
<a class="item-content item-link" href="/virtual-list/">
559567
<div class="item-media"><i class="icon icon-f7"></i></div>
@@ -609,7 +617,7 @@
609617
</div>
610618
</div>
611619
</div>
612-
<script src="../../build/core/js/framework7.js"></script>
620+
<script src="../../packages/core/js/framework7.min.js"></script>
613621
<script src="js/routes.js"></script>
614622
<script src="js/app.js"></script>
615623
</body>

‎kitchen-sink/core/js/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,4 @@ var app = new Framework7({
2929
vi: {
3030
placementId: 'pltd4o7ibb9rc653x14',
3131
},
32-
});
32+
});

‎kitchen-sink/core/js/routes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,10 @@ var routes = [
432432
},
433433
],
434434
},
435+
{
436+
path: '/tooltip/',
437+
componentUrl: './pages/tooltip.html',
438+
},
435439
{
436440
path: '/timeline/',
437441
url: './pages/timeline.html',

‎kitchen-sink/core/pages/elevation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</div>
1212
</div>
1313
<div class="page-content">
14-
<div class="block">
14+
<div class="block block-strong">
1515
<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>
1616
<p>Elevation can be added to any element by adding <code>elevation-1</code>, <code>elevation-2</code>, ..., <code>elevation-24</code> classes</p>
1717
</div>

‎kitchen-sink/core/pages/tooltip.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="page">
3+
<div class="navbar">
4+
<div class="navbar-inner sliding">
5+
<div class="left">
6+
<a href="#" class="link back">
7+
<i class="icon icon-back"></i>
8+
<span class="ios-only">Back</span>
9+
</a>
10+
</div>
11+
<div class="title">Tooltip</div>
12+
<div class="right">
13+
<a href="#" class="link navbar-tooltip">
14+
<i class="icon f7-icons if-ios">info</i>
15+
<i class="icon material-icons if-md">info_outline</i>
16+
</a>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="page-content">
21+
<div class="block block-strong">
22+
<p>Tooltips display informative text when users hover over, focus on, or tap an element.</p>
23+
<p>Tooltip can be positioned around any element with any HTML content inside.</p>
24+
</div>
25+
<div class="block block-strong">
26+
<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. {{tooltipIcon}} 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, {{tooltipIcon}} aliquam non lectus. Nam laoreet turpis erat, eget bibendum leo suscipit nec.</p>
27+
<p>Vestibulum {{tooltipIcon}} 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 {{tooltipIcon}} felis tempus nisl, porta consectetur nunc neque eget risus. Phasellus vestibulum leo at ante ornare, vel congue justo tincidunt.</p>
28+
<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 {{tooltipIcon}} 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 {{tooltipIcon}} massa.</p>
29+
</div>
30+
<div class="block-title">Auto Initialization</div>
31+
<div class="block block-strong">
32+
<p>For simple cases when you don't need a lot of control over the Tooltip, it can be initialized automatically with <code>tooltip-init</code> class and <code>data-tooltip</code> attribute: <a style="display: inline-block" class="button button-round button-outline button-small tooltip-init" data-tooltip="Button tooltip text">Button with Tooltip</a></p>
33+
</div>
34+
</div>
35+
</div>
36+
</template>
37+
<script>
38+
return {
39+
data: function () {
40+
var icon = this.$theme.ios
41+
? '<i class="icon f7-icons color-blue icon-tooltip">info_fill</i>'
42+
: '<i class="icon material-icons color-blue icon-tooltip">info</i>';
43+
return {
44+
tooltipIcon: icon,
45+
};
46+
},
47+
on: {
48+
pageInit: function() {
49+
var self = this;
50+
var app = self.$app;
51+
self.iconTooltip = app.tooltip.create({
52+
el: '.icon-tooltip',
53+
text: 'Tooltip text',
54+
});
55+
self.navbarTooltip = app.tooltip.create({
56+
el: '.navbar-tooltip',
57+
text: 'One more tooltip<br>with more text<br><em>and custom formatting</em>'
58+
});
59+
},
60+
pageBeforeRemove: function() {
61+
var self = this;
62+
if (self.iconTooltip) self.iconTooltip.destroy();
63+
if (self.navbarTooltip) self.navbarTooltip.destroy();
64+
},
65+
},
66+
}
67+
</script>

0 commit comments

Comments
 (0)