NetrunnerDB Integration

This page doesn't include the usual setup of js and css files of other NetrunnerDB pages. Instead, it includes only the files that some external page may want to include to add some features.

Card Tooltip

Setup

include the following CSS files
1. https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.css
2. https://netrunnerdb.com/netrunnerfont.css

include the following javscript in your <head> section:

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.2/taffy-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/forerunnerdb/1.3.867/fdb-all.js"></script>
  <script>
    var NRDB = {};
  </script>
  <script src="https://netrunnerdb.com/js/nrdb.tip.js"></script>
  <script src="https://netrunnerdb.com/js/nrdb.data.js"></script>
  <script src="https://netrunnerdb.com/js/nrdb.format.js"></script>
  <script type="text/javascript">$.noConflict();</script>

add links pointing to NetrunnerDB pages, like Noise: Hacker Extraordinaire or The Toolbox or Fetal AI

JS encapsulation

All the code from nrdb.*.js lives in the NRDB namespace and uses jQuery in noConflict mode (like this page).

CSS Styling

Execute NRDB.tip.set_hide_event('unfocus') in the js console to have the tooltips stay on the screen. That should help you style them.

Warning: style.css adds styling to all .icon elements.

the tooltip is div.qtip-nrdb
the content is div.qtip-content
the title is h4
the line of info under the title is p.card-info
the type in the info line is span.card-type
the subtype in the info line is span.card-keywords
the rest of the info line is span.card-prop
the text of the card is div.card-text
each line of text of the card is p
the last line with influence and faction is p.card-faction

div.qtip-nrdb
  div.qtip-content
    h4
    p.card-info
      span.card-type
      span.card-keywords
      span.card-prop
    div.card-text
      p
      p
      p
    p.card-faction