tooltip-template/index.html at master · Action-Lab/tooltip-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Tooltip Template</title>

  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  <link rel="stylesheet" href="tippy/tippy.css">
  <script src="tippy/tippy.min.js"></script>

  <style>
    html {
      font-size: 1.5em;
    }

    body {
      margin-left: auto;
      margin-right: auto;
      padding: 0 40px 0 40px;
      max-width: 800px;
      line-height: 1.4em;
      font-family: 'PT Sans', sans-serif;
    }

    span {
      /*
       Remove border-bottom property if you don't want any underlining.
       Set its size in pixels and type (e.g. dotted, solid, dashed).
      */
      border-bottom: 3px dotted;
    }
  </style>
</head>

<body>

  <h1>Excerpt from Chapter 1</h1>

  <p>
    “I want to attempt a thing like that and am frightened by these
    <span title="things of little value or importance">trifles</span>,”
    he thought, with an odd smile. “Hm... yes, all is in a
    man’s hands and he lets it all slip from cowardice, that’s
    an axiom. It would be interesting to know what it is men are
    most afraid of. Taking a new step, uttering a new word is what
    they fear most.... But I am talking too much. It’s because I
    chatter that I do nothing. Or perhaps it is that I chatter
    because I do nothing. I’ve learned to chatter this last month,
    lying for days together in my den thinking... of Jack the
    Giant-killer. Why am I going there now? Am I capable of that?
    Is that serious? It is not serious at all. It’s simply a fantasy
    to amuse myself; a plaything! Yes, maybe it is a plaything.”
  </p>

  <p>
    The heat in the street was terrible: and the airlessness, the
    bustle and the plaster, scaffolding, bricks, and dust all
    about him, and that special Petersburg stench, so familiar to
    all who are unable to get out of town in summer—all worked
    painfully upon the young man’s already overwrought nerves.
    The insufferable stench from the pot-houses, which are
    particularly numerous in that part of the town, and the
    drunken men whom he met continually, although it was a working
    day, completed the revolting misery of the picture. An expression
    of the profoundest disgust gleamed for a moment in the young
    man’s refined face. He was, by the way, exceptionally handsome,
    above the average in height, slim, well-built, with beautiful
    dark eyes and dark brown hair. Soon he sank into deep thought,
    or more accurately speaking into a complete blankness of mind;
    he walked along not observing what was about him and not caring
    to observe it. From time to time, he would mutter something,
    from the habit of talking to himself, to which he had just
    confessed.

    <span title="В эту же минуту он и сам сознавал, что мысли его
    порою мешаются и что он очень слаб: второй день как уж он
    почти совсем ничего не ел.">
    At these moments he would become conscious that
    his ideas were sometimes in a tangle and that he was very weak;
    for two days he had scarcely tasted food.</span>
  </p>


  <script>
    tippy('span, a');
  </script>

</body>
</html>