Databases
StackOverflow2013
Postsdbo
POMouseover Change the location of a div that appears
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMouseover Change the location of a div that appears
    text
    copied!<p>I am using this jQuery <a href="http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery" rel="nofollow">this</a> tooltip in a project.</p> <p>The problem is when I have a lot of stuff appearing in the hidden tooltip (div). When this happens the div height is bigger and cannot fit in the screen so it goes under the screen and parts of the div cannot be read.</p> <p>I want to make the div to appear in the middle of the mouse pointer and not in the bottom right of the pointer.</p> <p>Is that possible?</p> <p>Edit:</p> <p>This is the jQuery code</p> <pre><code> /*=========================Tooltip NOT MINE===================================*/ //Select all anchor tag with rel set to tooltip $('a[rel=tooltip]').mouseover(function() { //Grab the title attribute's value and assign it to a variable var tip = $(this).attr('title'); //Remove the title attribute's to avoid the native tooltip from the browser $(this).attr('title',''); //Append the tooltip template and its value $(this).append('&lt;div id="tooltip"&gt;&lt;div class="tipHeader"&gt;&lt;/div&gt;&lt;div class="tipBody"&gt;' + tip + '&lt;/div&gt;&lt;div class="tipFooter"&gt;&lt;/div&gt;&lt;/div&gt;'); //Show the tooltip with faceIn effect $('#tooltip').fadeIn('1000'); $('#tooltip').fadeTo('100',0.9); }).mousemove(function(e) { //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse $('#tooltip').css('top', e.pageY + 10 ); $('#tooltip').css('left', e.pageX + 20 ); }).mouseout(function() { //Put back the title attribute's value $(this).attr('title',$('.tipBody').html()); //Remove the appended tooltip template $(this).children('div#tooltip').remove(); }); /*=========================Tooltip END===================================*/ </code></pre> <p>This is how I get all the text in the tooltip from my database</p> <pre><code> echo "&lt;p class='resultInfo'&gt;&lt;a rel='tooltip' class='tip' title='&lt;p class=title&gt;Information: &lt;/p&gt;&lt;p&gt; &lt;span class=title&gt;Knowledge&lt;/span&gt;&lt;span&gt;". $resultData['Knowledge'] ."&lt;span class=title&gt;Competence: &lt;/span&gt;&lt;span&gt;". $resultData['Competence'] ."&lt;span class=title&gt; Skills: &lt;/span&gt;&lt;span&gt;". $resultData['Skills'] ."&lt;/span&gt;'&gt;" . $resultData["Level"] . "&lt;span class='icon'&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;"; </code></pre> <p>The script is working great as I said above. The only problem is when the echo output sometimes is to long and causes my div tooltip to expand over the screen height. So I want to push the div up in the middle of the cursor</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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