]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
docs: simplify and improve Tooltip examples
authorNicolas Coden <nicolas@ncoden.fr>
Thu, 15 Mar 2018 08:36:34 +0000 (09:36 +0100)
committerNicolas Coden <nicolas@ncoden.fr>
Thu, 15 Mar 2018 08:36:34 +0000 (09:36 +0100)
docs/pages/tooltip.md

index 389c066cfb7557a7b7cf05daa997e626871e5286..01408594f244f83788041d7e5fdc25b21571c421 100644 (file)
@@ -19,9 +19,8 @@ By default, a tooltip appears below the defined term on hover.
 </div>
 
 ```html_example
-<p>
-The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
-</p>
+The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite
+clear of any branches, and, if allowed to fall, would have fallen at our feet.
 ```
 
 ---
@@ -38,11 +37,8 @@ To get a tip-top top tooltip (lol), just add the class `.top` to the `<span>` el
 </div>
 
 ```html_example
-<p>
-...clearing away the brambles with the
-<span data-tooltip class="top" tabindex="2" title="A tool used for cutting crops.">scythe.</span>
-At the spot thus attained a second peg was driven, and about this, as a centre, a rude circle, about four feet in diameter, described. Taking now a spade himself, and giving one to Jupiter and one to me, Legrand begged us to set about one to digging as quickly as possible.
-</p>
+The <span data-tooltip class="top" tabindex="2" title="Fancy word for a beetle.">scarabaeus</span>
+hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.
 ```
 
 ---
@@ -60,13 +56,14 @@ By default, clicking on a tooltip will leave it open until you click somewhere e
 </div>
 
 ```html_example
-<p>
 this
-<span data-tooltip class="top" tabindex="2" title="You see?  I'm open!">tooltip will stay open</span>
-
+<span data-tooltip class="top" tabindex="2" title="You see?  I'm open!">
+  tooltip will stay open
+</span>
 while
-<span data-tooltip class="top" data-click-open="false" tabindex="2" title="I don't stay open">this one will only be open when hovered</span>
-</p>
+<span data-tooltip class="top" data-click-open="false" tabindex="2" title="I don't stay open">
+  this one will only be open when hovered
+</span>
 ```
 
 ---
@@ -88,12 +85,11 @@ You can also position the tooltips to the right and left of the word by adding t
 </div>
 
 ```html_example
-<p>
-To speak the truth, I had no especial relish for such amusement at any time, and, at that particular moment, would most willingly have declined it; for the night was coming on, and I felt much fatigued with the exercise already taken; but I saw no mode of escape, and was fearful of disturbing my poor friend's equanimity by a refusal. Could I have depended, indeed, upon Jupiter's aid, I would have had no hesitation in attempting to get the
-<span data-tooltip class="right" tabindex="3" title="Someone not using Foundation.">lunatic</span>
-home by force; but I was too well assured of the old negro's disposition, to hope that he would assist me, under any circumstances, in a personal contest with his master. I made no doubt that the latter had been infected with some of the innumerable Southern superstitions about money buried, and that his phantasy had received confirmation by the finding of the scarabaeus, or, perhaps, by Jupiter's obstinacy in maintaining it to be "a bug of real gold." A mind disposed to lunacy would readily be led away by such suggestions -especially if chiming in with favorite preconceived ideas -and then I called to mind the poor fellow's speech about the beetle's being "the
-<span data-tooltip class="left" tabindex="4" title="Sometimes referred to as a homepage.">index</span>
-of his fortune." Upon the whole, I was sadly vexed and puzzled, but, at length, I concluded to make a virtue of necessity -to dig with a good will, and thus the sooner to convince the visionary, by ocular demonstration, of the fallacy of the opinions he entertained. </p>
+When he was dressed he went down the hall into the
+<span data-tooltip class="right" tabindex="3" title="Aligned on the right">kitchen</span>.
+The table was almost hidden beneath all Dudley's birthday presents. It looked as though
+<span data-tooltip class="left" tabindex="4" title="Aligned on the left">Dudley</span>
+had gotten the new computer he wanted, not to mention the second television and the racing bike.
 ```
 
 ---