Create special button on WP Tiny MCE Posts Editor for Shortcodes

I am trying to create a special button on the Tiny MCE editor on the Post Editor of WordPress. I want to create a button for my created shortcode tooltips.

Check out my desired output: http://prntscr.com/4cy6fd

I have the following code for my Tooltip shortcode:

//Text tooltip
function tooltip($atts, $content = ''){
    $atts = shortcode_atts(
        array(
          'class' => '',
          'title' => ''
        ), $atts);


     $html = '<a class="' . $atts['class'] .'"  title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>';
    return $html;    
  } 

add_shortcode('tooltip', 'tooltip');

Now when you execute this you will use the following codes for the shortcode:

[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip]

What I have done is that created some function to DISPLAY MY CREATED TOOLTIP SHORTCODE on the functions.php file on my theme using the following codes.

//Create Tiny MCE buttons
function mce_tooltip($button) {
  $buttons[] = 'superscript';
  return $button;
}
add_filter('mce_buttons_2', 'mce_tooltip');



/*
* Callback function to filter the MCE settings
*/

function mce_tooltip( $init_array ) {  

// Define the style_formats array

  $style_formats = array(  
    // Each array child is a format with it's own settings
    array(  
      'class' => '',  
      'title' => ''      
  );  
  // Insert the array, JSON ENCODED, into 'style_formats'
  $init_array['style_formats'] = json_encode( $style_formats );  

  return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'mce_tooltip' ); 

I tried the code but it won’t show up my CUSTOM button for my shortcode on the TINY MCE Editor on WordPress. Any idea how to do it better?

Here’s the output I am trying to create:
http://prntscr.com/4cy6fd