Here you are!

and write messages into <span>, e.g.

then creating a child element <span> with adding one of the following position in its class:

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>,

Choose one of the following ways,

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:

Hover me! Here you are!

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>



Edgar Allan PoeTake this kiss upon the brow!And, in parting from you now,Thus much let me avow —You are not wrong, who deemThat my days have been a dream;Yet if hope has flown awayIn a night, or in a day,In a vision, or in none,Is it therefore the less gone?All that we see or seemIs but a dream within a dream....... Night style

'et-style-night' 諸葛亮 <前出師表>



臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州疲弊，此誠危急存亡之秋也。 然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。 誠宜開張聖聽，以光先帝遺德，恢宏志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。...... 詳全文>



臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州疲弊，此誠危急存亡之秋也。 然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。 誠宜開張聖聽，以光先帝遺德，恢宏志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。...... 'et-style-night' 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! 'et-style-warn'

Example:

<button class='et'>Hover me!

<span class='et-right et-style-night'>

Here you are!

</span>

</button>

Result:

Hover me! Here you are!

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



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

Example:

<button class='et'>Hover me!

<span class='et-bottom et-style-night et-arrow'>

Here you are!

</span>

</button>

Result:

Hover me! Here you are!

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>

Result: