Fandom

Wikia Developers Wiki

CSS3Tooltip/code.css

< CSS3Tooltip

889pages on
this wiki
Add New Page
Talk0 Share
/*
  1. */
  2.     /**
  3.     * CSS3 Tips
  4.     *
  5.     * A stylesheet for creating tooltips without using anything other than CSS3.
  6.     *
  7.     * created by c.bavota
  8.     * released under GPL v2
  9.     *
  10.     * November 6th, 2013
  11.     */
  12.     [data-tips] {
  13.     position: relative;
  14.     text-decoration: none;
  15.     }
  16.     [data-tips]:after,
  17.     [data-tips]:before {
  18.     position: absolute;
  19.     z-index: 100;
  20.     opacity: 0;
  21.     }
  22.     [data-tips]:after {
  23.     content: attr(data-tips);
  24.     height: 25px;
  25.     line-height: 25px;
  26.     padding: 0 5px;
  27.     font-size: 12px;
  28.     text-align: center;
  29.     color: #fff;
  30.     background: #222;
  31.     border-radius: 2px;
  32.     text-shadow: 0 0 5px #000;
  33.     /* -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
  34.     /* -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
  35.     /* box-shadow: 0 0 5px rgba(0,0,0,0.3); */
  36.     white-space: nowrap;
  37.     -moz-box-sizing: border-box;
  38.     -webkit-box-sizing: border-box;
  39.     box-sizing: border-box;
  40.     }
  41.     [data-tips]:before {
  42.     content: "";
  43.     width: 0;
  44.     height: 0;
  45.     border-width: 6px;
  46.     border-style: solid;
  47.     }
  48.     [data-tips]:hover:after,
  49.     [data-tips]:hover:before {
  50.     opacity: 1;
  51.     }
  52.     /* Top tips */
  53.     [data-tips].top-tip:after,
  54.     [data-tips].top-tip:before {
  55.     -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
  56.     -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
  57.     transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
  58.     bottom: 90%;
  59.     left: -9999px;
  60.     margin-bottom: 12px;
  61.     }
  62.     [data-tips].top-tip:before {
  63.     border-color: #222 transparent transparent transparent;
  64.     margin-bottom: 0;
  65.     }
  66.     [data-tips].top-tip:hover:after,
  67.     [data-tips].top-tip:hover:before {
  68.     bottom: 100%;
  69.     left: 0;
  70.     }
  71.     [data-tips].top-tip:hover:before {
  72.     left: 15px;
  73.     }
  74.     /* Bottom tip */
  75.     [data-tips].bottom-tip:after,
  76.     [data-tips].bottom-tip:before {
  77.     -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
  78.     -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
  79.     transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
  80.     top: 90%;
  81.     left: -9999px;
  82.     margin-top: 12px;
  83.     }
  84.     [data-tips].bottom-tip:before {
  85.     border-color: transparent transparent #222 transparent;
  86.     margin-top: 0;
  87.     }
  88.     [data-tips].bottom-tip:hover:after,
  89.     [data-tips].bottom-tip:hover:before {
  90.     top: 100%;
  91.     left: 0;
  92.     }
  93.     [data-tips].bottom-tip:hover:before {
  94.     left: 15px;
  95.     }
  96.     /* Left tip */
  97.     [data-tips].left-tip:after,
  98.     [data-tips].left-tip:before {
  99.     -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
  100.     -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
  101.     transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
  102.     top: -9999px;
  103.     left: 96%;
  104.     margin-left: 12px;
  105.     }
  106.     [data-tips].left-tip:before {
  107.     border-color: transparent #222 transparent transparent;
  108.     margin-left: 0;
  109.     }
  110.     [data-tips].left-tip:hover:after,
  111.     [data-tips].left-tip:hover:before {
  112.     left: 100%;
  113.     top: 0;
  114.     }
  115.     [data-tips].left-tip:hover:before {
  116.     top: 7px;
  117.     }
  118.     /* Right tip */
  119.     [data-tips].right-tip:after,
  120.     [data-tips].right-tip:before {
  121.     -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
  122.     -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
  123.     transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
  124.     top: -9999px;
  125.     right: 96%;
  126.     margin-right: 12px;
  127.     }
  128.     [data-tips].right-tip:before {
  129.     border-color: transparent transparent transparent #222;
  130.     margin-right: 0;
  131.     }
  132.     [data-tips].right-tip:hover:after,
  133.     [data-tips].right-tip:hover:before {
  134.     right: 100%;
  135.     top: 0;
  136.     }
  137.     [data-tips].right-tip:hover:before {
  138.     top: 7px;
  139.     }
  140. /*
*/

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.