haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added tooltips for the different tools

This commit is contained in:
Lewis Hemens 2014-03-10 22:08:38 +00:00
parent a2d4993a72
commit 007aafe54a
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -13,7 +13,7 @@
font-size: 0.95em; font-size: 0.95em;
} }
#draw-tools, #file-tools, #edit-tools, #drive-tools { #draw-tools, #file-tools, #edit-tools, #drive-tools, .tooltip {
display: inline-block; display: inline-block;
position: relative; position: relative;
float: left; float: left;
@ -115,6 +115,17 @@ textarea {
white-space: pre; white-space: pre;
} }
.tooltip {
display: none;
}
.tool:hover > .tooltip {
display: block;
position: fixed;
bottom: 5px;
left: 5px;
}
</style> </style>
</head> </head>
<body> <body>
@ -128,12 +139,24 @@ textarea {
</pre></div> </pre></div>
<div id="draw-tools"> <div id="draw-tools">
<button id="box-button" class="tool active">Box</button> <button id="box-button" class="tool active">Box
<button id="line-button" class="tool">Line</button> <div class="tooltip">Draw boxes. You can resize them later with the Resize tool.</div>
<button id="freeform-button" class="tool">Draw</button> </button>
<button id="erase-button" class="tool">Erase</button> <button id="line-button" class="tool">Line
<button id="move-button" class="tool">Resize</button> <div class="tooltip">Draw lines. Connect it to another line to change the orientation.</div>
<button id="text-button" class="tool">Text</button> </button>
<button id="freeform-button" class="tool">Draw
<div class="tooltip">Press a character on the keyboard, then drag to draw it.</div>
</button>
<button id="erase-button" class="tool">Erase
<div class="tooltip">Drag out an area to erase.</div>
</button>
<button id="move-button" class="tool">Resize
<div class="tooltip">Resize boxes and lines, just drag a line to change it.</div>
</button>
<button id="text-button" class="tool">Text
<div class="tooltip">Press where to start writing, and type the text you want.</div>
</button>
<!-- <button id="select-button">Select</button> --> <!-- <button id="select-button">Select</button> -->
</div> </div>
<div id="file-tools"> <div id="file-tools">