The XIVDB tooltips script (3.2kb JS / 1.8kb CSS) allows you to load Final Fantasy XIV game content on your site, all data is obtained from XIVDB, hosted on a US Server.
- Codepen: http://codepen.io/viion/full/mVzYRQ/
- Codepen French: http://codepen.io/viion/full/VaZNbp/
- Codepen German: http://codepen.io/viion/full/gwjQXv/
- Codepen Japanese: http://codepen.io/viion/full/PGBxOR/
- Embed the script: http://xivdb.com/tooltips.js anywhere in your code. eg:
<html>
<head>
...
</head>
<body>
...
<script src="https://secure.xivdb.com/tooltips.js"></script>
</body>
</html>And that is all there is to it!
The tooltips require jQuery, if you do not have this on your site then the script will attempt to embed it for you, which should work.
Here are the JavaScript global settings, each one lists its "default" state. Include this somewhere in your code if you wish to change any of the options. You don't need to include all of the options, just the ones you want to change.
var xivdb_tooltips =
{
// Where to get tooltips from.
source: 'https://secure.xivdb.com',
// Language the tooltips should be in
language: 'en',
// Should tooltips attempt to replace the link?
// if set to false: seturlname, seturlcolor and seturlicon will be skipped
replace: true,
// Should tooltips replace the name of the link?
seturlname: true,
// Should tooltips apply a rarity color? (eg: Relics set to Purple)
seturlcolor: true,
// If your site is white/bright, set this true
seturlcolorDarken: true,
// Should tooltips include an icon?
seturlicon: true,
// Should tooltips replace hidden links?
includeHiddenLinks: false,
// How long to wait until attempting to include jquery
// if jquery still doesn't exist after this time, it will
// be auto included
jqueryCheckDelay: 500,
// Minimum site width (pixels) to assume we're on a mobile,
// tooltips should not be used on mobile sites.
mobileMinimumWidth: 500,
// Prevent this script from setting your sites html height to 100%
// this helps with knowing mouse position.
preventHtmlHeight: false,
// How far the tooltip should be from the mouse
tooltipDistanceX: 30,
tooltipDistanceY: 30,
//
// EVENTS
//
// this is called once tooltips load, provides tooltip data,
// eg: event_tooltipsLoaded: function(tooltips) { ... }
event_tooltipsLoaded: null,
};Sometimes you may want specific links to act differently than the global setting, here are some data attributes you can use in your a tags.
Here is an example
<!-- Tooltip attached to .wrapper div -->
<div class="wrapper" data-xivdb-seturlicon="0">
<a href="..." data-xivdb-parent=".wrapper">...</a>
</div>
<!-- single link, tooltip doesn't change anything visually -->
<a href="..." data-xivdb-replace="0">...</a>Options:
data-xivdb-ignore="1"ignore this link (no tooltips appear)data-xivdb-replace="0"does not replace the link with any name/color/icons.data-xivdb-seturlname="0"do not replace the link with the content namedata-xivdb-seturlcolor="0"do not change the colour of the link to match raritydata-xivdb-seturlicon="0"do not add an game icon next to the link
Here are a few Javascript funky stuff:
//
// Need to call a function once the tooltips load?
//
var xivdb_tooltips.event_tooltipsLoaded = function() {
console.log('Tooltips loaded!');
};//
// Does your site contain dynamic content that
// is loaded in later? (eg AJAX), force the
// tooltips to re-scan for links.
//
XIVDBTooltips.get()
//
// if your dynamically loaded content is heavy
// (eg: search results, lots of html) then you
// can call a delayed method, which will wait.
// A bit smoother.
//
XIVDBTooltips.getDelayed();//
// Need to remove the tooltips, eg: Clicking
// a link that loads in another page?
//
XIVDBTooltips.hide();If you run into any issues, it is really easy to contact me, either:
- XIVDB Feedback: http://xivdb.com/feedback
- Discord: https://discord.gg/6XT7FTJ
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent