Databases
StackOverflow2013
Postsdbo
POMaking a tooltip appear where the mouse is, random behavior?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking a tooltip appear where the mouse is, random behavior?
    primarykey
    data
    text
    <p>I want a speech bubble-like tooltip to appear where the mouse is after some text has been selected. And it does work, but when you scroll down and try it out near the end of the document (if it's a long one), it doesn't work. It's quite random. Sometimes the tooltip appears close to the beginning of the document, or it might appear too far to the left, or to the right, or only a portion of it might appear, or it might not appear at all.</p> <p>Here's the fiddle: <a href="http://jsfiddle.net/bdAbZ/" rel="nofollow">http://jsfiddle.net/bdAbZ/</a></p> <p>Here's the code:</p> <pre><code>// Generate the speech bubble // Temporary placeholder var $speechBubble = $('&lt;p class="speech-bubble"&gt;&lt;/p&gt;'); $speechBubble.appendTo('body'); var mousePosition; function updateMousePosition(event) { /* Update the global variable mousePosition with the current location of the mouse. */ mousePosition = {left: event.pageX, top: event.pageY}; } $(document).mousemove(updateMousePosition); // mousePosition will always be up-to-date. function getSelectedText() { /* Return the text that the user has selected. ** ** If he hasn't selected anything, return an empty string. */ // Different browsers, different ways of getting the selected text. if (window.getSelection) { return window.getSelection(); } else if (document.getSelection) {      return document.getSelection();     }     else if (document.selection) {      return document.selection.createRange().text; }     else { // This should normally never happen. alert('Could not get the selected text.') return false; } } $('p').mouseup(function() { /* Check if the user has selected any text within the p area. ** ** If he has, show the speech bubble menu. */ var selectedText = getSelectedText(); if (selectedText != '') { $speechBubble.text(selectedText); $speechBubble.offset(mousePosition); $speechBubble.show(); } }); $(document).mouseup(function() { /* Check if no text has been selected. ** ** If no text has been selected, hide the speech bubble menu. ** ** Why? The user would probably try to get rid of the speech bubble by clicking somewhere else. */ if (getSelectedText() == '') { $speechBubble.hide(); } }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMarco Petersen
    1. USMarco Petersen
    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. POMaking a tooltip appear where the mouse is, random behavior?
      1. USPrashant Kumar
      1. VTFavorite
    2. VO
      singulars
      1. POMaking a tooltip appear where the mouse is, random behavior?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMaking a tooltip appear where the mouse is, random behavior?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COMind creating a fiddle? It would be much easier to troubleshoot your issue.
      singulars
      1. POMaking a tooltip appear where the mouse is, random behavior?
      1. USJames Kleeh
    2. COdont forget to show getSelectedText function
      singulars
      1. POMaking a tooltip appear where the mouse is, random behavior?
      1. USVeXii
    3. CODo you want the mouse position or the selected text position? I've been working on a project that does this except it places the tooltip based on the selection rather than the mouse which seems more desireable...
      singulars
      1. POMaking a tooltip appear where the mouse is, random behavior?
      1. USfrshca
 

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