To show block with phrase under

Question

How to make next action with javascript and events? If i put cursor on word, block with phrase must be showed with inline-block display. Example I'll attach in first ansver.

Answer 1

There are many ways to achieve this behaviour... one among other doesn't require JS, but just Css:

<span id="word">the word
<span id="block">the over label</span>
</span>

(just the structure for quick explanation)
Then you use the css pseudo selector :hover on #word and target #block child for show/hide.

As is, your #block will be displayed inserted just next #word (technically appended)... So you need some more Css to position #block over the content without disturbing it when show/hide: check this code with commented css:

https://code.sololearn.com/W6hN5mfQnrPF/?ref=app

Answer 2

Code edited to have the block displayed above and centered relatively to the text ;)

Answer 3

@visph thank you!

Answer 4

https://code.sololearn.com/WjyTqh1Ic0PB/#html

Answer 5

@visph thank you, before your answer I didnt know is it possible. Could the block display down the middle of word? How to make it display above the word and under the word(for example, if it cant fit under, it display above)
http://imgur.com/lvQzGcf
http://imgur.com/yrFS2Ss
http://imgur.com/vF3dLby