XKCD tooltip

Greasy Fork is available in English.
XKCD tooltip

This script puts the xkcd tooltip under the picture and adds a link to explainxkcd.com
As of 07.10.2015. See ბოლო ვერსია.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name           XKCD tooltip
// @namespace      https://github.com/Lorentz83
// @description    This script puts the xkcd tooltip under the picture and adds a link to explainxkcd.com
// @include        http*://xkcd.com/*
// @include        http*://www.xkcd.com/*
// @include        http*://what-if.xkcd.com/*
// @include        http*://www.what-if.xkcd.com/*
// @grant          none
// @version        1.1d
// @icon           https://raw.githubusercontent.com/Lorentz83/userscripts/master/XKCDTooltip/icon.png
// @license        GPLv2; http://www.gnu.org/licenses/
// ==/UserScript==

/**
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 2 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

var css = [];
var i = 0;
css[i++] = ".tooltip { ";
css[i++] = "    padding: 5px; ";
css[i++] = "    margin: 2ex auto 1ex; ";
css[i++] = "    font-size: 80%; ";
css[i++] = "    width: 60%; ";
css[i++] = "    border-style: solid; ";
css[i++] = "    border-radius: 12px; ";
css[i++] = "}";
css[i++] = ".xkcdtooltip {";
css[i++] = "    border-width: 1px; ";
css[i++] = "}";
css[i++] = ".whatiftooltip { ";
css[i++] = "    border: 1px solid #005994; ";
css[i++] = "    padding: 1.5ex; ";
css[i++] = "    margin-top: 0; ";
css[i++] = "}";

var addAfter = function (dom, newNode){
    dom.parentNode.insertBefore(newNode, dom.nextSibling);
}

var addTitleBox = function(img, after, cssClass) {
      var title = img.title;
      if(title.length == 0)
	 return null;
      //img.title='';
    
      var titleBox = document.createElement('div');
      titleBox.innerHTML = title;
      titleBox.classList.add('tooltip');
      titleBox.classList.add(cssClass);
  
      addAfter(after,titleBox);
      return titleBox;
}

window.onload = function() {  

  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css.join('\n');
  document.head.appendChild(style);
    
  var comicBox = document.getElementById('comic');
  
  if (comicBox) {
      var img = comicBox.getElementsByTagName('img')[0];
      var titleBox = addTitleBox(img, comicBox, 'xkcdtooltip');
      var name = document.getElementById('ctitle').innerHTML;
      var a = document.createElement('a');
      var id = document.location.href.split('/')[3];
      a.href = 'http://www.explainxkcd.com/wiki/index.php?title=' + id;
      a.innerHTML = 'explain this';
      addAfter(titleBox,a);
  }
  
  var article = document.getElementsByTagName('article');
  if(article.length > 0){
    var imgs = article[0].getElementsByTagName('img');
    for (var i =0 ; i<imgs.length ; i++){
        addTitleBox(imgs[i], imgs[i], 'whatiftooltip');
    }
  }

};