Thread Rating:
  • 2 Vote(s) - 3 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] jQuery tooltips (no tipsy version)
#1
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: 169)
[Image: sig2.jpg]
Reply
#2
Including the whole jQuery UI (And uncompressed at that) just for tooltips isn't a great idea.
Reply
#3
Nice tutorial Andrew.
USHOST247, Nuova Webs.
about.me/maxpen | Miscy Networks owner
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)