I’m trying to get an information box popup when hovering over a text. Consider test case 1.
TEST CASE 1: Test Case 1 link
This is how the markup should be, but many things are not behaving as I thought it would. Firstly, the info box is not showing up when hovering over “more” text which is contained in .infobox class and the .info paragraph is where the info box is manipulated. The second problem is that the paragraph with class .infobox is not behaving as inline even though I have set display: inline; on .infobox class. Here if I use span instead of p for .infobox then it will behave as inline. I may need to use block elements within info box. After looking over the source, please head over to test case 2.
TEST CASE 2: Test Case 2 link
Here setting p tag as a whole to display: inline; makes the .infobox paragraph behave more or less like a span would, the “more” appears in the same line as the other text. However, the info box still doesn’t appear. After looking over the source, please head over to test case 3.
TEST CASE 3: Test Case 3 link
Okay… I gave up and changed p tag where .infobox was applied to span, now remember that the span has a p tag within it with class .info. Anyway, I get the result I want, the “more” appears inline without having to make the parent p tag inline and the info box does appear. Good! However, the markup is wrong, there is no way an inline element should contain blocks like ps or divs. How do I go about fixing this with test case 1’s markup?
I test run test case 3 on different browsers, and found there are browser inconsistencies there. So even if correct this, it may still have some problems as shown in attached image. Please take a look.
By the way, I could do info boxes on images and such without much problem, but doing it inside a block of text seems a bit different.
Thanks in advance.