Make cool tip with JQuery
3 min readMay 29, 2017
JQuery code
jQuery(document).ready(function() {
jQuery('.skillbar').each(function() {
jQuery(this).find('.skillbar-bar').animate({
width: jQuery(this).attr('data-percent')
}, 6000);
});
// Tooltip only Text
$('.tool-tip').hover(function() {
// on Hover
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
var img = $(this).find('.skillbar').attr('data-img');
$('<p class="tooltip"></p>')
.html('<img src="'+img+'" >')
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({
top: mousey,
left: mousex
})
});
});CSS code
body {Get Dang Thanh’s stories in your inbox
Join Medium for free to get updates from this writer.
font-family: 'Ubuntu', sans-serif;
width: 960px;
}
p {
color: #525252;
font-size: 12px;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #111;
background-color: #161616;
border-radius: 5px;
padding: 10px;
color: #e7e7e7;
}
#a {
display: block;
}
#a:hover+#b {
display: block;
}
#b {
display: none;
}
.contentContainer {
background: #a21f4d;
padding: 30px;
max-width: 800px;
min-width: inherit;
margin: auto;
border-radius: 10px;
Border: solid 5px #8ad000;
}
.skillbar {
position: relative;
display: block;
margin-bottom: 15px;
width: 100%;
background: #eee;
height: 35px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-ms-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
}
.skillbar-title {
position: absolute;
top: 0;
left: 0;
width: 110px;
font-weight: bold;
font-size: 13px;
color: #ffffff;
background: #6adcfa;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-title span {
display: block;
background: rgba(0, 0, 0, 0.1);
padding: 0 20px;
height: 35px;
line-height: 35px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-bar {
height: 35px;
width: 0px;
background: #6adcfa;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 11px;
height: 35px;
line-height: 35px;
color: #ffffff;
color: rgba(0, 0, 0, 0.4);
}
HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contentContainer">
<div class="tool-tip" title="just to see how this works ">
<div class="skillbar clearfix " data-percent="45%" data-img='http://c1.staticflickr.com/3/2930/34086850331_898dc05710.jpg'>
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">45%</div>
</div>
<!-- End Skill Bar -->
</div>
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="65%" data-img='http://c1.staticflickr.com/4/3867/15146361238_02195dae48.jpg'>
<div class="skillbar-title" style="background: #2980b9;"> <span>CSS3</span></div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skill-bar-percent">65%</div>
</div>
<!-- End Skill Bar -->
</div>
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="50%" data-img='http://c1.staticflickr.com/3/2807/34365995715_47e1a30af9.jpg'>
<div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
<div class="skillbar-bar" style="background: #2c3e50;"></div>
<div class="skill-bar-percent">50%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="40%" data-img='http://c1.staticflickr.com/3/2217/2541032116_27e5abbf4b.jpg'>
<div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
<div class="skillbar-bar" style="background: #5a68a5;"></div>
<div class="skill-bar-percent">40%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="75%" data-img='http://c1.staticflickr.com/3/2643/3984053325_8063a8ab88.jpg'>
<div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
<div class="skillbar-bar" style="background: #525252;"></div>
<div class="skill-bar-percent">75%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="100%" data-img='http://c1.staticflickr.com/4/3933/15638877405_2d19888d42.jpg'>
<div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
<div class="skillbar-bar" style="background: #2ecc71;"></div>
<div class="skill-bar-percent">100%</div>
</div>
</div>
<!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="70%" data-img='http://c1.staticflickr.com/1/297/19176156656_5520b9b4a7.jpg'>
<div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
<div class="skillbar-bar" style="background: #4288d0;"></div>
<div class="skill-bar-percent">70%</div>
</div>
</div>
<!-- End Skill Bar -->
</div>This entry is supported by https://www.emojionline.org
