MyBB Community Forums

Full Version: jQuery tooltips (no tipsy version)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Heres what you'll end up with  [Image: gHJ9fWb.png]

Copy paste this into your header include - Change the links for the files

  <script src="images/gamerx/jquery-ui.js"></script>
  $(function() {
    $( document ).tooltip();

Then add this to the bottom of your global.css

.ui-tooltip {
        padding: 5px;
        position: absolute;
        z-index: 9999;
        max-width: 300px;
        -webkit-box-shadow: 0 0 5px #aaa;
        box-shadow: 0 0 5px #aaa;
        font-family: 'Alegreya SC', Georgia, serif;
        font-weight: 400;   
        font-size: 14px;
        color: #719DAB;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        text-align: center;
        border: 1px solid #ccc;
        background: #fff;
        text-indent: 0px;
        border-radius: 3px;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.1);

body .ui-tooltip {
        border-width: 1px;

Download:  [attachment=32404]
Including the whole jQuery UI (And uncompressed at that) just for tooltips isn't a great idea.
Nice tutorial Andrew.