MyBB Community Forums
[For 1.8] jQuery tooltips (no tipsy version) - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] jQuery tooltips (no tipsy version) (/thread-159057.html)

jQuery tooltips (no tipsy version) - iAndrew - 2014-09-09

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>
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>

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:  
.zip   MyBB tooltips.zip (Size: 118.11 KB / Downloads: 244)

RE: jQuery tooltips (no tipsy version) - Eric - 2014-09-10

Including the whole jQuery UI (And uncompressed at that) just for tooltips isn't a great idea.

RE: jQuery tooltips (no tipsy version) - master412160 - 2014-09-11

Nice tutorial Andrew.