function apply_hint( selector ) {
  selector.tooltip({
    top: 30,
    left:    0,
    fixPNG: false,
    track: true,
    delay: 300,
    showURL: false,
    showBody: " - ",
    fade: 0,
    bodyHandler : function () {
    var s;

    s    = "<div class=\"hint\">" +
            "   <div class=\"hint-top\"></div>" +
            "   <div class=\"hint-center\">" +
            "      <p>" + $(this).attr('hint') + "</p>" +
            "   </div>" +
            "   <div class=\"hint-bottom\"></div>" +
            "</div>";

    return s;
    }
  });
}

function apply_hintwide( selector ) {
  selector.tooltip({
    top: 30,
    left:    0,
    fixPNG: false,
    track: true,
    delay: 300,
    showURL: false,
    showBody: " - ",
    fade: 0,
    bodyHandler : function () {
    var s;

    s    = "<div class=\"hintwide\">" +
            "   <div class=\"hintwide-top\"></div>" +
            "   <div class=\"hintwide-center\">" +
            "      <p>" + $(this).attr('hint') + "</p>" +
            "   </div>" +
            "   <div class=\"hintwide-bottom\"></div>" +
            "</div>";

    return s;
    }
  });
}

$(document).ready( function () {

  apply_hint( $('.hintable') );
  apply_hintwide( $('.widehintable') );

});