Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem in displaying tooltip box with jQuery and css

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34591
    binboy
    Participant

    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?
    http://i.stack.imgur.com/5KGQC.gif

    CSS:

    .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:




    • put returns between paragraphs

      about





    • for linebreak add 2 spaces at end

      how

    jQuery:

    $("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();
    })
    #88322
    SgtLegend
    Member

    See how this goes for you

    http://jsfiddle.net/AQh6y/10/

    #88323
    binboy
    Participant

    see this link it is my HTML original: LINK i want show tooltip box in above link no in bottom link, how is it?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.