SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style for displaying tooltip box

    Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) DEMO

    I want example this (for how): what do i do?

    tooltip.gif

    CSS:

    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;*/
    }
    HTML:

    HTML Code:
    <ul>
        <li>    
        <div class="show_tooltip">
            put returns between paragraphs
        </div>
            <a href="#">about</a>
        </li>
        <br>
        <li>    
        <div class="show_tooltip">
            for linebreak add 2 spaces at end
        </div>
            <a href="#">how</a>
        </li>
    </ul>
    jQuery:

    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();
    })

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2008
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main mistake you have done is you have used .tooltip class in jquery where the actual class in css is .show_tooltip

    $('.tooltip').css('bottom', e.pageY - 10);
    $('.tooltip').css('right', e.pageX + 10);
    Replace the css like this

    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;*/
    /*add some width according to tooltip text lenght */
        width:320px;
    }

    and

    replace the jquery

    Code:
    $("li a").mouseenter(function(){
         $(this).prev().fadeIn();
    }).mousemove(function(e) {
                $('.show_tooltip').css('top', e.pageY -40);
                $('.show_tooltip').css('left', e.pageX -350);
            }).mouseout(function(){
         $(this).prev().fadeOut();
    })


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •