Skip to content

Commit 1f6a405

Browse files
author
Slavik Gildeev
committed
added tooltips
1 parent 4f352f8 commit 1f6a405

File tree

2 files changed

+99
-26
lines changed

2 files changed

+99
-26
lines changed

‎assets/css/index.css

+24-1
Original file line numberDiff line numberDiff line change
@@ -390,5 +390,28 @@ h1 {
390390
margin-top: 15px;
391391
font-size: 30px;}
392392

393-
.portfolio-tools .fa + .fa {
393+
.portfolio-tools .tooltip + .tooltip {
394394
margin-left: 15px;}
395+
396+
/*=================== Tooltips ======================*/
397+
.tooltip {
398+
display: inline-block;
399+
position: relative;}
400+
401+
.tooltip:after {
402+
background: #ff8533;
403+
border: 1px solid #fff;
404+
color: #fff;
405+
content: attr(data-title);
406+
font-size: 15px;
407+
position: absolute;
408+
top: -100%;
409+
padding: 0.5em;
410+
margin-left: -50%;
411+
opacity: 0;
412+
transition: all 0.5s ease 0s;
413+
transform: translateX(-50%);}
414+
415+
.tooltip:hover:after {
416+
top: -35px;
417+
opacity: 1;}

‎index.html

+75-25
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,21 @@ <h1>Still hesitating? Here's what our clients have to say</h1>
171171
<div class="portfolio-title">DiveCntre HQ</div>
172172
<p>A complete dive shop management system delivering point of sale, event management and customer relationship facilities in the cloud.</p>
173173
<div class="portfolio-tools">
174-
<i class="fa fa-code"></i>
175-
<i class="fa fa-lightbulb-o"></i>
176-
<i class="fa fa-cog"></i>
177-
<i class="fa fa-pencil"></i>
178-
<i class="fa fa-wrench"></i>
174+
<span class="tooltip" data-title="Backend">
175+
<i class="fa fa-code"></i>
176+
</span>
177+
<span class="tooltip" data-title="Idea">
178+
<i class="fa fa-lightbulb-o"></i>
179+
</span>
180+
<span class="tooltip" data-title="Cogs">
181+
<i class="fa fa-cog"></i>
182+
</span>
183+
<span class="tooltip" data-title="Managment">
184+
<i class="fa fa-pencil"></i>
185+
</span>
186+
<span class="tooltip" data-title="Maintenance">
187+
<i class="fa fa-wrench"></i>
188+
</span>
179189
</div>
180190
</div>
181191
</li>
@@ -185,11 +195,21 @@ <h1>Still hesitating? Here's what our clients have to say</h1>
185195
<div class="portfolio-title">Vikando</div>
186196
<p>A complete dive shop management system delivering point of sale, event management and customer relationship facilities in the cloud</p>
187197
<div class="portfolio-tools">
188-
<i class="fa fa-code"></i>
189-
<i class="fa fa-lightbulb-o"></i>
190-
<i class="fa fa-cog"></i>
191-
<i class="fa fa-pencil"></i>
192-
<i class="fa fa-wrench"></i>
198+
<span class="tooltip" data-title="Backend">
199+
<i class="fa fa-code"></i>
200+
</span>
201+
<span class="tooltip" data-title="Idea">
202+
<i class="fa fa-lightbulb-o"></i>
203+
</span>
204+
<span class="tooltip" data-title="Cogs">
205+
<i class="fa fa-cog"></i>
206+
</span>
207+
<span class="tooltip" data-title="Managment">
208+
<i class="fa fa-pencil"></i>
209+
</span>
210+
<span class="tooltip" data-title="Maintenance">
211+
<i class="fa fa-wrench"></i>
212+
</span>
193213
</div>
194214
</div>
195215
</li>
@@ -199,11 +219,21 @@ <h1>Still hesitating? Here's what our clients have to say</h1>
199219
<div class="portfolio-title">Boto</div>
200220
<p>A streamlined issue tracking, is a new issue tracking service for those who just want to cut the crap and get to work. With a light, airy design it is the minimalist's wet dream. No more work-flow interruptions</p>
201221
<div class="portfolio-tools">
202-
<i class="fa fa-code"></i>
203-
<i class="fa fa-lightbulb-o"></i>
204-
<i class="fa fa-cog"></i>
205-
<i class="fa fa-pencil"></i>
206-
<i class="fa fa-wrench"></i>
222+
<span class="tooltip" data-title="Backend">
223+
<i class="fa fa-code"></i>
224+
</span>
225+
<span class="tooltip" data-title="Idea">
226+
<i class="fa fa-lightbulb-o"></i>
227+
</span>
228+
<span class="tooltip" data-title="Cogs">
229+
<i class="fa fa-cog"></i>
230+
</span>
231+
<span class="tooltip" data-title="Managment">
232+
<i class="fa fa-pencil"></i>
233+
</span>
234+
<span class="tooltip" data-title="Maintenance">
235+
<i class="fa fa-wrench"></i>
236+
</span>
207237
</div>
208238
</div>
209239
</li>
@@ -213,11 +243,21 @@ <h1>Still hesitating? Here's what our clients have to say</h1>
213243
<div class="portfolio-title">Dialogfeed</div>
214244
<p>A unique tool created to collect and store in one single place comment feeds from different sources like Facebook, Twitter and YouTube with great possibilities to easily integrate application widget to any html page.</p>
215245
<div class="portfolio-tools">
216-
<i class="fa fa-code"></i>
217-
<i class="fa fa-lightbulb-o"></i>
218-
<i class="fa fa-cog"></i>
219-
<i class="fa fa-pencil"></i>
220-
<i class="fa fa-wrench"></i>
246+
<span class="tooltip" data-title="Backend">
247+
<i class="fa fa-code"></i>
248+
</span>
249+
<span class="tooltip" data-title="Idea">
250+
<i class="fa fa-lightbulb-o"></i>
251+
</span>
252+
<span class="tooltip" data-title="Cogs">
253+
<i class="fa fa-cog"></i>
254+
</span>
255+
<span class="tooltip" data-title="Managment">
256+
<i class="fa fa-pencil"></i>
257+
</span>
258+
<span class="tooltip" data-title="Maintenance">
259+
<i class="fa fa-wrench"></i>
260+
</span>
221261
</div>
222262
</div>
223263
</li>
@@ -227,11 +267,21 @@ <h1>Still hesitating? Here's what our clients have to say</h1>
227267
<div class="portfolio-title">SeatSumo</div>
228268
<p>A social-based service created to share and exchange different tickets liek tickets for sport events, cinema, theater, etc.</p>
229269
<div class="portfolio-tools">
230-
<i class="fa fa-code"></i>
231-
<i class="fa fa-lightbulb-o"></i>
232-
<i class="fa fa-cog"></i>
233-
<i class="fa fa-pencil"></i>
234-
<i class="fa fa-wrench"></i>
270+
<span class="tooltip" data-title="Backend">
271+
<i class="fa fa-code"></i>
272+
</span>
273+
<span class="tooltip" data-title="Idea">
274+
<i class="fa fa-lightbulb-o"></i>
275+
</span>
276+
<span class="tooltip" data-title="Cogs">
277+
<i class="fa fa-cog"></i>
278+
</span>
279+
<span class="tooltip" data-title="Managment">
280+
<i class="fa fa-pencil"></i>
281+
</span>
282+
<span class="tooltip" data-title="Maintenance">
283+
<i class="fa fa-wrench"></i>
284+
</span>
235285
</div>
236286
</div>
237287
</li>

0 commit comments

Comments
 (0)