CODEWITHSUNDEEP
jquerycss
Sumit Gera
Sumit Gera

Reputation: 1241

Browser Compatibility issue in the tooltip

I was working on a tooltip (to show content in it while typing). It was working fine on chrome but only before I tested it on Mozilla Firefox. The tooltip is positioned at the bottom of the text-area box in Chrome Browser (which is what I want) but in Mozilla Firefox it shows up at some random place but the tooltips for all the text-areas show up at same random place on focussing the text-area. I know its a CSS issue but still attaching all the related code.

CSS

.tooltip
{
    color:#0D776e;
    font-size:15px;
    font-family:calibri;
    min-height:25px;
    border-radius:4px;
    margin:0 0.5%;
    word-wrap:break-word;
    display:none;
    z-index:500;
    width:200px;
    position:absolute;
    top:32px;
}

Jquery

$(document).ready(function()
{
    $("textarea").focus(function()
    {
        var targetArea = $(this);
        targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"}).html(targetArea.val());
    });

    $("textarea").blur(function()
    {
        var targetArea = $(this);
        targetArea.siblings('div').fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
    });

    $("textarea").keyup(function()
    {
        var targetArea = $(this);
        targetArea.siblings('div').html(targetArea.val());
    });
});

Upvotes: 0

Views: 527

Answers (1)

charlietfl
charlietfl

Reputation: 171689

If I remember from a prior post you are using this in a TD. TD will not accept position so wrap all the contents in a DIV with position:relative so that the tooltip can refernce it's position from the DIV

Upvotes: 1

Related Questions