Search code examples
jqueryhtmlclickmouseeventhidden

JQuery: Show a hidden div at mouse position when a link is clicked


Suppose I have 2 links in my page and I want a hidden div to appear at the position the mouse is located (mouse x,y) at on the page when either of links is clicked. Also, I'd like to pass in a value to set the title for the div (see divTitle id).

How can I accomplish this using jQuery?

Hidden Div:

<div class="boxFAQ" id="questionMarkId">
  <span id="divTitle"></span>  
  SHOW ME!
</div>

Solution

  • The below code will give you idea about showing the div. Proceed with your requirements and then hide it accordingly or display message as you need

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function(){
       $('.alink').click(function(e){
        $('#questionMarkId').hide();
        $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
        $('#questionMarkId').show();
       });
    });
    
    
    
    </script>
    </head>
    
    <body>
    
    <div class="boxFAQ" id="questionMarkId" style="display: none;">
      <span id="divTitle"></span>  
      SHOW ME!
    </div>
    
    
    <br /><br /><br /><br />
    <a href="#" class="alink">Link 1</a>
    <a href="#" class="alink">Link 2</a>
    
    
    </body>
    </html>
    

    UPDATED
    create a function which will be invoked on clicking of the link. To this function pass your message (any number of parameter)
    So your link will look like this

    <a href="#" class="alink" onclick="showTitle('This is the title')">Link 1</a>
    <a href="#" class="alink" onclick="showTitle('This is another title')">Link 2</a>
    

    Function will look like this

    function showTitle(message)
    {
        $('#questionMarkId').hide();
        $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
        $('#questionMarkId').show();
        $('#divTitle').html(message);
    }
    

    UPDATED
    Functions with event parameter

    function showTitle(message, evt)
    {
       var e = e || evt || window.event;
       // ... rest of the code
    }