A CodePen by Scott Robbin. jQuery Plugin Workshop - A sandbox to show students the basics of jQuery plugin authoring.

index.html

<h2>Tooltips</h2>
<ul>
  <li>
    <a href="#" data-tooltip="This is the first tooltip">Tooltip 1</a>
  </li>
  <li>
    <a href="#" data-tooltip="This is the second tooltip">Tooltip 2</a>
  </li>
  <li>
    <a class="third" href="#">Tooltip 3</a>
  </li>
</ul>

script.js

// Clear the console
console.clear();

(function ($) {
  
  $.fn.tooltip = function (text) {
    return this.each(function () {
    var $self = $(this),
        message = text || $self.data("tooltip");
      
      // Create a container for the tooltip
      var $tooltip = $("<div></div>");
      
      $tooltip
        .text(message)
        .addClass("tip")
        .appendTo($self);
      
      
      $self
        .mouseover(function () {
          $tooltip.show();
        })
        .mouseout(function () {
          $tooltip.hide();
        });
    });
  };

  $("a[data-tooltip]").tooltip();
  
  $.expr[':'].tooltip = function (element) {
    return $(element).data("tooltip");
  };
  
})(jQuery);
  
$(".third").tooltip("This is another tooltip!");
$("a:tooltip").css("color", "red");

style.scss

@import "compass";
body { padding: 10px; }

.tip {
  display: none;
  position: absolute;
  background: #000;
  color: white;
  padding: 5px
}