Lorem Ipsum
<Lorem Ipsum>
Duis dignissim mauris ac velit iaculis posuere. Proin quis massa sit amet ante interdum maximus rutrum nec nulla. In ultrices ac dolor eget ultricies. Aenean blandit commodo tortor consectetur porta. Fusce rhoncus arcu aliquet nunc venenatis imperdiet. Curabitur tincidunt felis ac egestas rutrum. Vivamus tincidunt a velit ac venenatis. Sed lacinia metus ac magna elementum blandit. In quis varius nisi.
(from Lorem Ipsum)
Adding the class et in the tag of element in which you want to display the tips on. E.g. if you want to show the tips message on your <button>,
<button class='et'>Hover me!</button>
then creating a child element <span> with adding one of the following position in its class:
et-bottom
et-top
et-left
et-right
et-left-bottom
et-left-top
et-right-bottom
et-right-top
and write messages into <span>, e.g.
<button class='et'>Hover me! <span class='et-top'> Here you are! </span> </button>
Result:
All of the classes
Position ( necessary )
One of the position class is necessary in the child element <span>.
＊ Please move your mouse over the blocks for an example.
Look top class='et-top'
I am the message on the top.
Look down 'et-bottom'
And I am the message on the bottom.
Look left 'et-left'
There is a message on the left.
Look right 'et-right'
There is also a message on the right!
Top right corner 'et-right-top'
What is in the upper right corner?
Top left corner 'et-left-top'
Actually, I am a half left-handed.
Bot right corner 'et-right-bottom'
Your tool is placed on the bottom right.
Bot left corner 'et-left-bottom'
In the bottom left corner, it's you.
Example:
<button class='et'>Hover me! <span class='et-right'> Here you are! </span> </button>
Result:
Styles ( optional )
Select one class to include into child element <span> if you want.
Default style <A Dream Within a Dream> Edgar Allan Poe
Take this kiss upon the brow!
And, in parting from you now,
Thus much let me avow —
You are not wrong, who deem
That my days have been a dream;
Yet if hope has flown away
In a night, or in a day,
In a vision, or in none,
Is it therefore the less gone?
All that we see or seem
Is but a dream within a dream.
......
<read more>
Warning style 'et-style-warn'
Warning! Children's playground only allows children under the age of 15 to play, you can go with them, but are not allowed to play rides!
Example:
<button class='et'>Hover me! <span class='et-right et-style-night'> Here you are! </span> </button>
Result:
Arrow ( optional )
By default, there is no arrow. If you want an arrow, add 'et-arrow' to class in <span>.
Message block with arrow 'et-arrow'
By default, there is no arrow. If you want an arrow, add 'et-arrow' to class in <span>.
Message block without arrow (by default). Lorem Ipsum
Duis dignissim mauris ac velit iaculis posuere. Proin quis massa sit amet ante interdum maximus rutrum nec nulla. In ultrices ac dolor eget ultricies. Aenean blandit commodo tortor consectetur porta. Fusce rhoncus arcu aliquet nunc venenatis imperdiet. Curabitur tincidunt felis ac egestas rutrum. Vivamus tincidunt a velit ac venenatis. Sed lacinia metus ac magna elementum blandit. In quis varius nisi.
(from Lorem Ipsum)
Example:
<button class='et'>Hover me! <span class='et-bottom et-style-night et-arrow'> Here you are! </span> </button>
Result:
Width of tips block ( optional )
Select one class to include into child element <span> if needed.
Narrow message block (260px) 'et-narrow'
The max-width of block is 260px here.
Wider message block (660px) 'et-wide'
The max-width of block is 660px here.
Default width (400px) The default max-width is 400px.
Example:
<button class='et'>Hover me! <span class='et-bottom et-style-night et-arrow et-wide'> Here you are! </span> </button>
