Note that there are some explanatory texts on larger screens.

plurals
  1. PONot worked true tooltip box in jQuery
    primarykey
    data
    text
    <p>Don't know why the tooltip box(class <code>.show_tooltip</code>) shows up on the left when mouse enters on <code>li a</code>. I want to display each tooltip box on top of the same link that mouse is, i.e. just above/left of the link. Links have to be on the right just as they are now, so please do not change my html code) <strong><a href="http://jsfiddle.net/AQh6y/3/" rel="nofollow noreferrer">DEMO</a></strong></p> <p>Example : Mouseover on "how": What can I do to get it like this?</p> <p><img src="https://i.stack.imgur.com/5KGQC.gif" alt="enter image description here"></p> <p>These codes are a small specimen part from my original code, which is quite long.</p> <p><strong>CSS:</strong></p> <pre><code>.show_tooltip{ background-color: #E5F4FE; display: none; padding: 5px 10px; border: #5A5959 1px solid; position: absolute; z-index: 9999; color: #0C0C0C; /*margin: 0 0 0 0; top: 0; bottom: 0;*/ } </code></pre> <p><p></p> <p><strong>HTML:</strong></p> <pre><code>&lt;ul&gt; &lt;li&gt; &lt;div class="show_tooltip"&gt; put returns between paragraphs &lt;/div&gt; &lt;a href="#"&gt;about&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="show_tooltip"&gt; for linebreak add 2 spaces at end &lt;/div&gt; &lt;a href="#"&gt;how&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><p></p> <p><strong>jQuery:</strong></p> <pre><code>$("li a").mouseenter(function(){ $(this).prev().fadeIn(); }).mousemove(function(e) { $('.tooltip').css('bottom', e.pageY - 10); $('.tooltip').css('right', e.pageX + 10); }).mouseout(function(){ $(this).prev().fadeOut(); }) </code></pre>
    singulars
    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