CODEWITHSUNDEEP
javascriptjqueryhtmlcsspopup
LeSam
LeSam

Reputation: 1265

How to show a popup

I'm trying to show a popup when the mouse is over "a" element.

The problem is that I want to keep the popup when the mouse is over the popup element but the popup disappear when the mouse is over it.

The popup is just under the <a> element (on the display).

This is my code

HTML:

 <ul>
   <li>
    <a id="test">
      <div>
         Some text
      </div>

     <div id="popup">
        <ul>
          <li><a>text0</a>
          </li>
          <li><a>text1</a>
          </li>
        </ul>
      </div>
   </a>
  </li>
  <li> TEXT
  </li>
</ul>

CSS:

 #popup {
  display:none;
 }    

 #test:hover #popup {
   display:block;
 }

I tagged the question 'JAVASCRIPT / JQUERY' because if there is a solution with them, it would be welcome.

EDIT

THIS IS ACTUALLY MY CODE, and it doesn't works

Upvotes: 0

Views: 1500

Answers (6)

Stefan
Stefan

Reputation: 14883

Before your start coding take a look at jQueryUI Tooltip (http://jqueryui.com/tooltip/ ). It does what you want with minimal programming requirements.

From the doku:

Customizable, themeable tooltips, replacing native tooltips.

Example:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>

Upvotes: 3

Vijay Kukkala
Vijay Kukkala

Reputation: 362

 #popup {
 display:none;
 }    
 a:hover + #popup {
   display:block;
 }

Try this should work. jsfiddle

Upvotes: 0

Danimt
Danimt

Reputation: 1067

This will keep the popup active while the user is hovering it if the element is not related, otherwise if its a child of the element it won't lose focus.

#popup:hover {
  display:block
}

Upvotes: 0

Joe_G
Joe_G

Reputation: 906

The adjacent sibling selector is perfect for this example:

div {
    display: none;
}

a:hover + div {
    display: block;
}

Demo: http://jsfiddle.net/G4hd9/

Article: http://css-tricks.com/child-and-sibling-selectors/

Upvotes: 0

css
css

Reputation: 944

If you're not looking to use jQuery, you can make the div a child of the a tag and use some css trickery to make it all work (http://jsfiddle.net/TMBGm/):

<a>some text<div>popup text</div></a>


a {
    position: relative;
}
a div {
    display: none;
}
a:hover div {
    display: block;
    position: absolute;
}

Upvotes: 0

user2470746
user2470746

Reputation: 55

If you really wanna make a nice popup use this:

http://getbootstrap.com/2.3.2/javascript.html#popovers

Upvotes: 0

Related Questions