Animated evaluation pen with a tooltip

Developer
Mariam Massadeh
Size
2,771 Kb
Views
30,360
  1. Animated evaluation pen with a tooltip Previews
  2. Animated evaluation pen with a tooltip HTML Codes
  3. Animated evaluation pen with a tooltip CSS Codes
  4. Animated evaluation pen with a tooltip JS Codes

How do I make an animated evaluation pen with a tooltip?

What is a animated evaluation pen with a tooltip? How do you make a animated evaluation pen with a tooltip? This script and codes were developed by Mariam Massadeh on 03 November 2022, Thursday.

Animated evaluation pen with a tooltip Previews
IQ Test

Animated evaluation pen with a tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animated evaluation pen with a tooltip</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ReviewDiv"> <div class="ReviewDivLbl"> </div> <div class="ReviewDivStars"> <div class="star" onclick="star(this)" id="btnStar1"> <span class="tooltipStar">1 star</span> </div> <div class="star" onclick="star(this)" id="btnStar2"> <span class="tooltipStar">2 stars</span> </div> <div class="star" onclick="star(this)" id="btnStar3"> <span class="tooltipStar">3 stars</span> </div> <div class="star" onclick="star(this)" id="btnStar4"> <span class="tooltipStar">4 stars</span> </div> <div class="star" onclick="star(this)" id="btnStar5"> <span class="tooltipStar">5 stars</span> </div> </div> <a href="https://twitter.com/MariamMassadeh"> <p class="alert"> Mariam Massadeh- Joradn</p></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated evaluation pen with a tooltip - Script Codes CSS Codes

body
{ background-color:#f0f0f0; font-family:tahoma;
}
.ReviewDiv
{ text-align:center;
} .ReviewDiv .ReviewDivLbl
{ background-image: url('http://dc615.4shared.com/img/4rvhpE2T/s3/evaluate.png'); background-repeat: no-repeat; background-color: transparent; background-position: center center; width:100%; height:27px;
} .ReviewDiv .ReviewDivStars
{ text-align: center; width:175px; margin:0 auto;
}
.ReviewDiv .ReviewDivStars .star
{ background-image: url('http://dc615.4shared.com/img/mfh6Skd1/s3/grayStar.png'); background-repeat: no-repeat; background-position: center center; background-color: transparent; height:35px; width:35px; float:right;
}
.ReviewDiv .ReviewDivStars .star:hover
{ background-image: url('http://dc615.4shared.com/img/b1A4OVce/s3/goldStar.png'); cursor: pointer; -webkit-animation: loading 5s linear infinite; transform: translatez(10px); -webkit-transform: translatez(10px);
}
.StarSkin
{ background-image: url('http://dc615.4shared.com/img/b1A4OVce/s3/goldStar.png') !important;
}
@-webkit-keyframes loading { 0% {-webkit-transform:rotate(30deg);} 25% {-webkit-transform:rotate(0deg);} 75% {-webkit-transform:rotate(30deg);} 100% {-webkit-transform:rotate(0deg);}
}
.tooltipStar
{ position: absolute; top: 45px; left: 0; width:70px; z-index: 3; background: #8e1c1b; padding: 10px; padding-top: 5px; padding-bottom: 5px; color: #fff; border-radius: 20px 5px 20px 5px; font-size: 12px; font-weight: lighter; font-style: normal; font-variant: normal; text-transform: none; text-decoration: none; display:none;
}
.ReviewDiv .ReviewDivStars .star:hover .tooltipStar
{ display:block;
}
a
{ text-decoration:none;
}
.alert { width:400px; margin:0 auto; margin-top:200px;
padding: 35px;
margin-bottom: 20px;
background-color: #444;
border: 1px solid #fbeed5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; color: #fff; border:1px dashed #ccc;
}
.alert:hover
{ color:#f0f0f0; border:1px dashed #f0f0ff;
}

Animated evaluation pen with a tooltip - Script Codes JS Codes

function star(field) { $(".ReviewDivStars > div").each(function () { var targetID = $(field).attr("id"); var number = targetID.substr(7); var temp=number; if(temp>1) { $(".star").removeClass("StarSkin"); for(number; number>0; number--) { $("#btnStar"+number).slideDown(400).addClass("StarSkin"); } } else if(number<2 && $("#btnStar2").hasClass("StarSkin")) { $(".star").slideDown(400).removeClass("StarSkin"); $("#btnStar1").slideDown(400).addClass("StarSkin"); } else // if(number<2 && !(jQuery_1_9(field).hasClass("StarSkin"))) { $("#btnStar1").slideDown(400).toggleClass("StarSkin"); } });
}
Animated evaluation pen with a tooltip - Script Codes
Animated evaluation pen with a tooltip - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded November 03, 2022
Rating 3
Size 2,771 Kb
Views 30,360
Do you need developer help for Animated evaluation pen with a tooltip?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mariam Massadeh (MariamMassadeh) Script Codes
Name
Html5-canvas-snow-effect
Simple blog container, tool tip, simple animation on hover
Responsive Text Area with timer, counter and history
A Pen by Mariam Massadeh
Menu with a featured tooltip that has an animation from Jumping Animation pen
Notepad pen
Receipt with result
CSS3 Animation
Animated Progress Bar
Emploee Tree
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!