Databases
StackOverflow2013
Postsdbo
POPopUp window on hover
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPopUp window on hover
    primarykey
    data
    text
    <ul> <li>My Problem:</li> </ul> <p>I have my requirement of showing the popup window on hover of a html element. Very important part of this implementation is, the popup should be visible even on hover of the popup window itself.</p> <ul> <li>Tried To implement:</li> </ul> <p>For me the popup window is showing On hover of the target element. It is also showing on hover of the popup window. But the problem is I am only able to show the popup on hover of the popup if it is just near the target element. But if I want the hover popup to be little more in distance to the target element, the popup is getting disappeared when i bring my cursor to it. Any body implemented this scenarion?</p> <p>I am using jQuery. Following code can be reffered:</p> <pre><code>//Catching the mouse over event and showing the hover popup. $("div[id^=RestInformationHolder_div] &gt; a").hover( function() { var control = this.id; var POP = this.parentNode.parentNode; var assetType=$("#" + POP.id).attr('_assetType'); fillPopupContent(control, assetType); positionDivToTarget(this); showElement("restRowAnchorPopup"); }, function() { $("#restRowAnchorPopup").hover( function() { showElement("restRowAnchorPopup");//"restRowAnchorPopup" is the popup div id. }, function() { hideElement("restRowAnchorPopup"); } ); hideElement("restRowAnchorPopup"); } ); } function fillPopupContent(targetElementId, assetType) { //Fill the content in the popup div. } function positionDivToTarget(targetElement) { var posArray = getPositionToBody(targetElement); var offsetLeft = posArray[0] + targetElement.offsetWidth * 1 / 3; var offsetTop = posArray[1] + targetElement.offsetHeight; $("#restRowAnchorPopup").css({ "top": offsetTop, "left": offsetLeft }); } function showElement(elementId) { $("#" + elementId).css("display", "block"); } function hideElement(elementId) { $("#" + elementId).css("display", "none"); } function getPositionToBody(targetHtmlElement) { //Returns the relative position of the target element. } </code></pre> <p>Any help is appreciated.</p> <p>Thanks in Advance. Subrat.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USskaffman
    1. USSubrat
    plurals
    1. This table or related slice is empty.
    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
    1. VO
      singulars
      1. POPopUp window on hover
      1. USMaxim Zaslavsky
      1. VTFavorite
    2. VO
      singulars
      1. POPopUp window on hover
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat does your code look like? If you aren't already, start using jQuery. It'll make javascript a LOT easier... =) http://www.jquery.com
      singulars
      1. POPopUp window on hover
      1. USTomas Lycken
    2. COIt would help if you specified the language(s) as tag(s)
      singulars
      1. POPopUp window on hover
      1. USChrisF
    3. COany chance you can provide a live link to the site? just trying to visually get what you are after... but can't.
      singulars
      1. POPopUp window on hover
      1. USscunliffe
 

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