Note that there are some explanatory texts on larger screens.

plurals
  1. POTooltip appearing at the bottome of the page in chrome but not in IE
    primarykey
    data
    text
    <p>Hi i have a tooltip that is appearing at the bottom of the page. It should just appear after the mouspointer. It is currently working in IE but not in Chrome!</p> <p>Here is my html code</p> <pre><code> &lt;div style="width:958px; margin:auto"&gt; &lt;div id="diy_content"&gt; &lt;div&gt; &lt;a class="tip_trigger" href="shttp://www.purplecoffer.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('purplecoffer','','http://beta.brownbag.ph/diy/mini-banners/purplecoffer.jpg',1)"&gt; &lt;img src="http://beta.brownbag.ph/diy/mini- banners/purplecoffer_2.jpg" name="purplecoffer" width= "150px" height = "100px"border="0"&gt; &lt;span class="tip" style="width: 400px;"&gt;&lt;img src="http://beta.brownbag.ph/diy/mini-banners/purplecoffer.jpg" style="float: left; margin-right: 20px;" alt="" /&gt; Purple Coffer &lt;br/&gt; Apparel and Clothing &lt;br/&gt; VISIT: www.purplecoffer.com &lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is my CSS</p> <pre><code>/*--Tooltip Styles--*/ .tip { position:absolute; z-index:1000; color: #fff; background:#1d1d1d; padding:10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tip_trigger .tip { display:none; } </code></pre> <p>And here is my function</p> <pre><code> $(document).ready(function() { //Tooltips $('.tip_trigger').each(function() { var tip = $(this).find('.tip'); $(this).hover( function() { tip.appendTo('body');}, function() { tip.appendTo(this); } ).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coodrinates var mousey = e.pageY + 20; //Get Y coordinates var tipWidth = tip.width(); //Find width of tooltip var tipHeight = tip.height(); //Find height of tooltip //Distance of element from the right edge of viewport var tipVisX = $(window).width() - (mousex + tipWidth); //Distance of element from the bottom of viewport var tipVisY = $(window).height() - (mousey + tipHeight); if ( tipVisX &lt; 20 ) { //If tooltip exceeds the X coordinate of viewport mousex = e.pageX - tipWidth - 20; } if ( tipVisY &lt; 20 ) { //If tooltip exceeds the Y coordinate of viewport mousey = e.pageY - tipHeight - 20; } tip.css({ top: mousey, left: mousex }); }); }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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