How to Create Beauty Tooltips Social Share Button

Social button share frequently encountered some blogs, how to create social share button with html, Jquery:

Why Should You Use This?

All major social networks have their own share widgets you can put on your page, but this isn't ideal for a variety of reasons:

1. They tend to be slow-loading.
2. They inject extra javascript and DOM elements into your page making it slower.
3. They generally aren't customizable enough to fit the design of your site.
4. Mananging each provider's code snippets etc is repetitive and needless. Additionally, they can make your front-end code quite messy.
5. The buttons themselves take up a lot of space (especially the Facebook share button).

Let's take a quick look at the alternative, using this little plugin:

1. It doesn't load any iframes or extra javascript making the overall load time much faster.
2. It looks simple and clean by default, and can be customized in any and every way.
3. All you have to do to use it is include the script and call new Share on an empty div. That's two lines of code total, the script link and the share call.
4. It's tiny and compact, expanding only when the user actually wants to share something.

Step 1 : Create Javascript Code for tooltips

<script>
    $(function(){
      $('.share-button').share({
        title: 'Share Button Test',
        image: 'http://carrot.is/img/fb-share.jpg',
        app_id: '602752456409826',
        background: 'rgba(255,255,255,.5)',
        color: '#3B2B45',
        flyout: 'top center'
      });
    });
  </script>

Step 2 : Create Html Script 

<div class='share-button share-button-top'></div>

Step 3 : Embeded share.js and Jquery  

Embeded script share.js and jquery.js get lastest version

Demo | Download | Read more