Ajax Loader
×

Tooltips

This is actually quite old, which is good, because it means that it works just fine on any 3.6 or later firefox. I'm not sure how well it fits on this site, but it has a practical application, you can just drop the css on your page and get very nice tooltips with no work at all, and no tag soup either, one tag per tooltip, unless you want formatting in which case it's 2 tags.

It takes care of various edge cases:

  • it prevents line breaks in the middle of a span of text with a tooltip
  • it accommodates both tooltips longer and shorter than the original text, and makes both look visually pleasing in different ways
  • it allows for formatting in tooltips

sorry about the awkward demo, but I mostly just copied and pasted from an old demo.

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
 
3
<html lang="en">
4
  <head>
5
    <meta charset="utf-8" />
6
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css" />
7
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Bentham" />
8
    <style>
9
      html {
10
        background: #929292;
11
      }
12
      body {
13
        font-family: Bentham;
14
        margin: 100px auto;
15
        background: white;
16
        width: 427px;
17
        padding: 50px;
18
        line-height: 1.5em;
19
        -moz-border-radius: 10px; /* FF1+ */
20
        -webkit-border-radius: 10px; /* Saf3+, Chrome */
21
        border-radius: 10px; /* Opera 10.5, IE 9 */
22
      }
23
      em { font-style: italic; }
24
      strong { font-weight: bold; }
25
      del { text-decoration: line-through; }
26
      h1, h2, h3 { line-height: 1.5em; }
27
      h1 { font-size: 2em; }
28
      h2 { font-size: 1.5em; }
29
      h3 { font-size: 1.25em; font-weight: bold; }
30
      a, a:visited { color: black; }
31
      p { text-align: justify; margin-bottom: 5px; }
32
      @media screen and (-webkit-min-device-pixel-ratio:0) {
33
        section {
34
          margin: -0.25em;
35
          margin-top: -3.25em;
36
          border-top: 4em solid transparent;
37
          -webkit-background-clip: padding-box;
38
          padding: 0.25em;
39
        }
40
      }
41
      @-webkit-keyframes target {
42
        0% {
43
          background: rgba(191, 223, 255, 1);
44
        }
45
        100% {
46
          background: rgba(191, 223, 255, 0);
47
          -webkit-animation-name: none;
48
        }
49
      }
50
      section:target {
51
        -webkit-animation: target 3s ease-in;
52
      }
53
      aside {
54
        position: fixed;
55
        top: 100px;
56
        right: 0;
57
        -webkit-border-radius: 10px 0 0 10px;
58
        -moz-border-radius: 10px 0 0 10px;
59
        border-radius: 10px 0 0 10px;
60
        padding: 50px;
61
        background: white;
62
      }
63
    </style>
64
    <title>Tooltips v2</title>
65
  </head>
66
  <body>
67
    <aside>
68
      <ul>
69
        <li><a href="#demo">Basic Demo</a></li>
70
        <li><a href="#support">Browser Support</a></li>
71
      </ul>
72
    </aside>
73
    <h1>CSS3 Tooltips v2</h1>
74
    <h2>by <span data-tooltip="Adrusi" class="south"><a href="//adrusi.com/">Adrian Sinclair</a></span></h2>
75
    <section id="demo">
76
      <h3>Basic Demo</h3>
77
      <p>This CSS3 module is an easy and quick way to add nice looking tooltips to a page. Text that has a tooltip gets a <span data-tooltip="like this" class="south">dashed underline</span> so that the user knows that there is extra content to be revealed.</p>
78
      <p>In addition to underneath, tooltips can also be rendered on any side of the <span data-tooltip="north" class="north">text</span> <span data-tooltip="east" class="east">just</span> <span data-tooltip="south" class="south">like</span> <span data-tooltip="west" class="west">this</span>. You just give the tooltip a class of either north, east, south or west.
79
      <p>If a tooltip is shorter that the text the tooltip is associated with (the underlined text), then the tooltip will be <span data-tooltip="like this" class="south">exactly as wide as the text</span>. However if the tooltip text is longer than the underlined text, the tooltip will be as long as it needs, but stay <span data-tooltip="This is long tooltip text" class="south">centered</span>.</p>
80
      <p>Normally the content of a tooltip is pulled from the data-tooltip attribute, but if you need to have styled text, you can put the contents of the tooltip in a &lt;span> tag within a wrapper with the tooltip class. <span class="tooltip south">Like this <span>text <del>cannot</del> <em>can</em> be formatted</span></span>.</p>
81
    </section>
82
    <section id="support">
83
      <h3>Browser Support</h3>
84
      <p>Of the tested browsers, there is full support for firefox (tested in 3.6 and 4b8) and full support in webkit. Opera 11.0 has a few issues. The least important is that the subtle gradient falls back to solid (translucent) color. However, due to a rendering error, some tooltips fail to hide completely after the user hovers off the element. It has not been tested in internet explorer, and don't expect it to work. A javascript solution for Internet explorer will be in version 2.5.</p>
85
    </section>
86
  </body>
87
</html>
 
CSS 
      /* tooltip styles */
1
      /* tooltip styles */
2
      [data-tooltip], .tooltip {
3
        text-decoration: none!important;
4
        border-bottom: 1px dashed black;
5
        margin-bottom: -1px;
6
        position: relative;
7
        white-space: nowrap;
8
      }
9
      @-moz-document url-prefix() {
10
        [data-tooltip], .tooltip, [data-tooltip] a, .tooltip a {
11
          display: inline-block;
12
          line-height: 0.95em;
13
        }
14
      }
15
      /* general */
16
      [data-tooltip]::before, .tooltip::before {
17
        content: " ";
18
        line-height: 0;
19
        color: transparent;
20
        font-size: 0;
21
        display: none;
22
        width: 0;
23
        height: 0;
24
        border: 4px solid transparent;
25
        position: absolute;
26
        opacity: 0;
27
        left: 50%;
28
        margin-left: -4px;
29
        font-size: 12px;
30
      }
31
      [data-tooltip]::after, .tooltip > span {
32
        content: attr(data-tooltip);
33
        display: none;
34
        position: absolute;
35
        left: 50%;
36
        white-space: nowrap;
37
        min-width: 100%;
38
        -webkit-transform: translateX(-50%);
39
        -moz-transform: translateX(-50%);
40
        -o-transform: translateX(-50%);
41
        transform: translateX(-50%);
42
        padding: 0 5px;
43
        min-height: 18px;
44
        line-height: 18px;
45
        z-index: 0;
46
        font-size: 11px;
47
        -webkit-box-sizing: border-box;
48
        -moz-box-sizing: border-box;
49
        -o-box-sizing: border-box;
50
        box-sizing: border-box;
51
        color: white;
52
        background: rgba(24,24,24,0.8);
53
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(51,51,51,0.8)), to(rgba(0,0,0,0.8)));
54
        background: -moz-linear-gradient(top, rgba(51,51,51,0.8), rgba(0,0,0,0.8));
55
        font-weight: normal;
56
        text-align: center;
57
        -webkit-border-radius: 3px;
58
        -moz-border-radius: 3px;
59
        -o-border-radius: 3px;
60
        border-radius: 3px;
61
        font-family: sans-serif;
62
      }
63
      [data-tooltip]:hover::after, .tooltip:hover span {
64
        z-index: 2;
65
        display: block;
66
      }
67
      [data-tooltip]:hover::before, .tooltip:hover::before {
68
        opacity: 0.8;
69
        display: block;
70
      }
71
    
72
      /* south */
73
      [data-tooltip].south::before, .tooltip.south::before {
74
        border-bottom-color: #333;
75
        top: 100%;
76
      }
77
      [data-tooltip].south::after, .tooltip.south > span {
78
        margin-top: 8px;
79
        top: 100%;
80
      }
81
      /* north */
82
      [data-tooltip].north::before, .tooltip.north::before {
83
        border-top-color: #000;
84
        bottom: 100%;
85
      }
86
      [data-tooltip].north::after, .tooltip.north > span {
87
        margin-bottom: 8px;
88
        bottom: 100%;
89
      }
90
      /* east */
91
      [data-tooltip].east::before, .tooltip.east::before {
92
        border-right-color: #181818;
93
        border-width: 3px;
94
        left: 100%;
95
        margin-top: 0;
96
        margin-bottom: 0;
97
        margin-left: 0;
98
        position: absolute;
99
        top: 50%;
100
        margin-top: -3px;
101
      }
102
      [data-tooltip].east::after, .tooltip.east > span {
103
        margin-left: 10px;
104
        left: 100%;
105
        margin-left: 6px;
106
        top: 50%;
107
        -webkit-transform: translateY(-50%);
108
        -moz-transform: translateY(-50%);
109
        -o-transform: translateY(-50%);
110
        transform: translateY(-50%);
111
        min-width: 0px;
112
      }
113
      /* west */
114
      [data-tooltip].west::before, .tooltip.west::before {
115
        border-left-color: #181818;
116
        border-width: 3px;
117
        right: 100%;
118
        left: -6px;
119
        margin-top: 0;
120
        margin-bottom: 0;
121
        margin-left: 0;
122
        position: absolute;
123
        top: 50%;
124
        margin-top: -3px;
125
      }
126
      [data-tooltip].west::after, .tooltip.west > span {
127
        margin-left: 10px;
128
        left: 0;
129
        margin-left: -6px;
130
        top: 50%;
131
        -webkit-transform: translateY(-50%) translateX(-100%);
132
        -moz-transform: translateY(-50%) translateX(-100%);
133
        -o-transform: translateY(-50%) translateX(-100%);
134
        transform: translateY(-50%) translateX(-100%);
135
        min-width: 0px;
136
      }
 

Tooltips

CSSDeck G+