Databases
StackOverflow2013
Postsdbo
POHow can I add a popup menu next to a link on hover?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I add a popup menu next to a link on hover?
    primarykey
    data
    text
    <p>I'm writing an extension that adds to an existing site so I can't modify the HTML directly. Basically there is a series of links contained in a single div separated only by spaces. I am trying to use jquery to add a link of my own at an arbitrary location in this series and open a small menu immediately next to the link, like a right click context menu. When the link/menu hover focus is gone it should disappear.</p> <p>I can handle the jquery for the actual behavior but I'm a little concerned about where in the document I should be placing the html for this menu. Should it be at the end of the body? Just before/after the link? And then when I do hover over the link how do I get the correct positioning for this element? I've found examples but they all use lists. I just need a menu on link hover that appears <em>next to the link</em>.</p> <p>In short, my main concern is about how to position the popup div correctly beside the link. Secondary to that is how to keep the menu open when I try to hover over it instead of the link.</p> <p>This is how far I can get before I'm not sure what to do : <a href="http://jsfiddle.net/jRpyp/" rel="nofollow">http://jsfiddle.net/jRpyp/</a></p> <pre><code>$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | &lt;a href=\"#\" id=\"popup-link\"&gt;My text&lt;/a&gt; | "); $("#popup").toggle(); $("#popup-link").hover( function(e) { $("#popup").show(); }, function(e) { $("#popup").fadeOut("slow"); }); </code></pre> <p>And the HTML:</p> <pre><code>&lt;div class="menu"&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt; | &lt;a href="#"&gt;Link 2&lt;/a&gt; | &lt;a href="#"&gt;Link 3&lt;/a&gt; | &lt;a href="#"&gt;Link 4&lt;/a&gt; &lt;br /&gt; &lt;a href="#"&gt;More links&lt;/a&gt; | &lt;a href="#"&gt;More links&lt;/a&gt; | &lt;a href="#"&gt;More links&lt;/a&gt; | &lt;a href="#"&gt;More links&lt;/a&gt; &lt;/div&gt; &lt;div id="popup"&gt; &lt;ul&gt; &lt;li&gt;Link 1&lt;/li&gt; &lt;li&gt;Link 2&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USssb
    1. USssb
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I add a popup menu next to a link on hover?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I add a popup menu next to a link on hover?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow can I add a popup menu next to a link on hover?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat is the `filter` function needed for?
      singulars
      1. POHow can I add a popup menu next to a link on hover?
      1. USCody Guldner
    2. COTo select a link based on its text. I'm aware I could also use :eq() or :nth-child().
      singulars
      1. POHow can I add a popup menu next to a link on hover?
      1. USssb
    3. COSo you only want it for that link?
      singulars
      1. POHow can I add a popup menu next to a link on hover?
      1. USCody Guldner
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload