Designed by Veethemes.com

DEMO & DOWNLOAD LINK WITH TOOLTIP OPTION

Saturday, March 29, 2014 by GHANSHYAM No Comment
Learn - ' How to Design Tool Tip Option using CSS3 for Demo & Download Link '.

DEMO & DOWNLOAD LINK WITH TOOLTIP OPTION
TOOLTIP OPTION
demo Download Source
Today, We'll discuss about Tool Tip Option for a:link title attribute. We'll use CSS Attribute Selectors property to create tool tip option for title attribute.With using simple hover property to appear tooltip option. See the full tutorial of 'DEMO & DOWNLOAD LINK WITH TOOLTIP OPTION' and download source code form given above download link.

Here using content property to get the title attribute-   content:attr(title); and using the content=' ' property to get the down triangle shape.This triangle attache to the title option.

Tool Tip CSS :

.download:after{
  opacity:0;
    background:#fff;
  color:#000;
  border-radius:5px;
  bottom:50px;
  content:attr(title);
  left:30%;
  padding:5px 15px;
  position:absolute;
  z-index:98;
  width:220px;
} 
.download:before{
    opacity:0;
  color:#000;
  border:solid;
  border-color:#fff transparent; 
  border-width:6px 6px 0 6px; 
  bottom:44px; 
  content:""; 
  left:50%; 
  position:absolute;
  z-index:99;
}

THE MARKUP

Here is a markup Language for link attributes for demo and download buttons. We set value for title attribute eg. title='View Demo' and title='Click here to download'. When you'll touch the link button then appear to tooltip options.

<div id='preview'>
    <a href='#' title='View Demo' class='demo' alt='just click'>demo</a>

  <a href='#' title='Click here to download' class='download' alt='just click'>Download</a>

</div>

THE CSS

Here We're using CSS3 property to create tooltip option to more attractive and responsive.

CSS3 Transitions:
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts. Using time transition property tooltip option works more smoothly.
-webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;

CSS3 Transforms:
With CSS3, We can add and effects in 2D Transform [X,Y] axis. We used different transform effects to create tooltip option.

-webkit-transform: translate(15px,-15px);
  -moz-transform: translate(15px,-15px);
  -o-transform: translate(15px,-15px);
  transform: translate(15px,-15px);

and also use rotation transform property to rotate tool tip option.

-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);

Here is full css code of  Tool Tip option:

<style>
#preview  {
     margin-top:50px;
 margin-left:550px;
     padding:30px;
}
a.download {
  text-decoration:none;
  background:#222;
  color:#eee;
  padding:10px;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
  font-size:14px;
  font-weight:normal !important;
  border-radius:5px;
  border:2px solid #fff;
  display:inline-block;
  position:relative;
  -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  
}
a:hover.download{
  background:#000;
  color:#fff;
   -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}
a:active.download{
  background:#000;
  color:#fff;
  box-shadow:none;
   -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;

}
.download {
  display:inline-block;
  position:relative;
  text-align:center;
   box-shadow:4px 0 0 #eee; 
}
.download:after{
  opacity:0;
    background:#fff;
  color:#000;
  border-radius:5px;
  bottom:50px;
  content:attr(title);
  left:30%;
  padding:5px 15px;
  position:absolute;
  z-index:98;
  width:220px;
     box-shadow:4px 0 0 #eee; 
-webkit-transform: translate(15px,-15px);
  -moz-transform: translate(15px,-15px);
  -o-transform: translate(15px,-15px);
  transform: translate(15px,-15px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
} 
.download:before{
    opacity:0;
  color:#000;
  border:solid;
  border-color:#fff transparent; 
  border-width:6px 6px 0 6px; 
  bottom:44px; 
  content:""; 
  left:50%; 
  position:absolute;
  z-index:99;
  -webkit-transform: translate(15px,-15px);
  -moz-transform: translate(15px,-15px);
  -o-transform: translate(15px,-15px);
  transform: translate(15px,-15px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
}
.download:hover:after{
    opacity:1;
    background:#fff;
  color:#000;
  border-radius:5px;
  bottom:50px;
  content:attr(title);
  left:30%;
  padding:5px 15px;
  position:absolute;
  z-index:98;
  width:220px;
   -webkit-transform: translate(0px,0px);
  -moz-transform: translate(0px,0px);
  -o-transform: translate(0px,0px);
  transform: translate(0px,0px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
} 
.download:hover:before{
    opacity:1;
  color:#000;
  border:solid;
  border-color:#fff transparent; 
  border-width:6px 6px 0 6px; 
  bottom:44px; 
  content:""; 
  left:50%; 
  position:absolute;
  z-index:99;
  -webkit-transform: translate(0px,0px);
  -moz-transform: translate(0px,0px);
  -o-transform: translate(0px,0px);
  transform: translate(0px,0px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
}
a.demo {
  text-decoration:none;
  background:#222;
  color:#eee;
  padding:10px;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
  font-size:14px;
  font-weight:normal !important;
  border-radius:5px;
  border:2px solid #fff;
  display:inline-block;
  position:relative;
  margin:2px;
  -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}
a:hover.demo{
  background:#000;
  color:#fff;
   -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}
a:active.demo{
  background:#000;
  color:#fff;
  box-shadow:none;
   -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;

}
.demo {
  display:inline-block;
  position:relative;
  text-align:center;
   box-shadow:-4px 0 0 #eee; 
}
.demo:after{
  opacity:0;
  background:#fff;
  color:#000;
  border-radius:5px;
  bottom:50px;
  content:attr(title);
  right:30%;
  padding:5px 15px;
  position:absolute;
  z-index:98;
  width:220px;
 -webkit-transform: translate(-15px,-15px);
  -moz-transform: translate(-15px,-15px);
  -o-transform: translate(-15px,-15px);
  transform: translate(-15px,-15px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
} 
.demo:before{
  opacity:0;
  color:#000;
  border:solid;
  border-color:#fff transparent; 
  border-width:6px 6px 0 6px; 
  bottom:44px; 
  content:""; 
  right:50%; 
  position:absolute;
  z-index:99;
   -webkit-transform: translate(-15px,-15px);
  -moz-transform: translate(-15px,-15px);
  -o-transform: translate(-15px,-15px);
  transform: translate(-15px,-15px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
}
.demo:hover:after{
  opacity:1;
  background:#fff;
  color:#000;
  border-radius:5px;
  bottom:50px;
  content:attr(title);
  right:30%;
  padding:5px 15px;
  position:absolute;
  z-index:98;
  width:220px;
   box-shadow:-4px 0 0 #eee; 
  -webkit-transform: translate(0px,0px);
  -moz-transform: translate(0px,0px);
  -o-transform: translate(0px,0px);
  transform: translate(0px,0px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;  
} 
.demo:hover:before{
  opacity:1;
  color:#000;
  border:solid;
  border-color:#fff transparent; 
  border-width:6px 6px 0 6px; 
  bottom:44px; 
  content:""; 
  right:50%; 
  position:absolute;
  z-index:99;
-webkit-transform: translate(0px,0px);
  -moz-transform: translate(0px,0px);
  -o-transform: translate(0px,0px);
  transform: translate(0px,0px);
  -webkit-transition: width .2s, height .2s,-webkit-transform .2s;  /* For Safari 3.1 to 6.0 */
transition: width .2s, height .2s, transform .2s;
}
</style>

OPACITY:
With using of opacity property to show and hide to tool tip option.In on hover effect to use Opacity:1; value to display tooltip option and another to normally [use Opacity:0;] to hidden the tooltip section.

I hope this tutorial useful for you. Please share this article on social media and drop your valuable comments.
GHANSHYAM

0 comments:

Post a Comment

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!