Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Hover over text to display a popup with text inside

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #202564
    halebales24
    Participant

    I am trying to see how I can make this idea of mine work. I’m trying to get this span to pop up any time that you hover over the text. In doing so, a pop up box will appear with text inside explaining more about the text you hovered over.

    So far, I somehow managed to make a pop up box appear, but the text manages to sit outside of the box and on the window without disappearing or appearing inside of the box. If you could help me to figure out what it is that I’m doing wrong and how I can correct this, that would be much appreciated!

    I’ve tried creating a list item and having a link inside of the list item and having it reference to a div outside of the list item, but it started getting a little complicated. So I made it into a span tag inside of the list item. But some of the others still are left as divs until I figure out what it is that I’m doing.

    Forgive me, for the css might have gotten a little sloppy over the last couple of attempts in trying to solve my problem.

    http://codepen.io/halebales24/pen/GJqVPY

    #202571
    Paulie_D
    Member

    What text is supposed to be hovered over and what text is supposed to appear.

    If you’re hovering over the dates and showing **all the ** text below, then I would not recommend a pop-up as such.

    You might be better with an accordion type effect.

    Couple of other things…your HTML is invalid. span element cannot contain block level elements like heading and paragraphs….and paragraphs can’t contain headings.

    This

          <p>Aug. 21-22
            <span><h2>Leadership Retreat</h2>
                            <p>Family Group Leaders and Vision Team will be going on a retreat to prepare for the upcoming school year. Meet at BCM at 8am for rides.</p></span></p>
    

    should be more like


    <p>Aug. 21-22</p> /* although I assume this is a link in fact */ <div> <h2>Leadership Retreat</h2> <p>Family Group Leaders and Vision Team will be going on a retreat to prepare for the upcoming school year. Meet at BCM at 8am for rides.</p> </div>
    #202572
    Paulie_D
    Member
    #202634
    halebales24
    Participant

    Thank you for your help! I thought that span wasn’t a good option either and some of my html was poorly written. I do like the idea of an accordion effect with the text, I may try that! Thanks again for your help!

    #279738
    srijit
    Participant

    Paulie d thanks… it was very helpful.. how can i change the arrow to the bottom side….

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.