Tooltip

[sandy1028]

Hi,

The tooltip information in title tag : IE browser is viewed in 3 lines but in mozilla is viewd in single line.
How do I avoid viewing in single line for mozilla browser.
In mozilla it should be viewed in 3 lines

Can anyone suggested me a tutoral for dynamic ballon tooltip.

The tooltip should increase as the amount of text increases and decrease as text is decreased.

[NogDog]

To the best of my knowledge, there is no way to force line breaks into title attribute tool-tips in Firefox. The only alternative I know of would be to create your own via JavaScript, using onmouseover events with dynamic HTML/CSS.

[sandy1028]

When i use the image of ballon.gif for tooltip the other text in the page other than the text inside tooltip is also seen how do I avoid it....

<style>
#bubble_tooltip{
        width:400px;
        position:absolute;
        display:none;
}
#bubble_tooltip .bubble_top{
        background-image: url('../bubb_top.gif');
        background-repeat:no-repeat;
        height:56px;
}
#bubble_tooltip .bubble_middle{
        background-image: url('../bubb_middle.gif');
        background-repeat:repeat-y;
        background-position:bottom left;
        padding-left:8px;
        padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
        position:relative;
        top:-5px;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        font-size:15px;

}
#bubble_tooltip .bubble_bottom{
        background-image: url('../bubb_bottom.gif');
        background-repeat:no-repeat;
        background-repeat:no-repeat;
        height:90px;
        position:relative;
        top:-3px;
}
<style>

<script>
function showToolTip(e,text){
        if(document.all)e = event;

    var obj = document.getElementById('bubble_tooltip');
    var obj2 = document.getElementById('bubble_tooltip_content');
    obj2.innerHTML = text;
    obj.style.display = 'block';
    var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
   // if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
    var leftPos = e.clientX - 70;
    if(leftPos<0)leftPos = 0;
    obj.style.left = leftPos + 'px';
    obj.style.top = e.clientY + 270- obj.offsetHeight -1 + st + 'px';
}

function hideToolTip()
{
        document.getElementById('bubble_tooltip').style.display = 'none';

}
</script>

<div id="bubble_tooltip">
        <div class="bubble_top"><span></span></div>
        <div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
        <div class="bubble_bottom"></div>
</div>

$tool="some code .... is Down";
                        print "<img src=\"..img.gif\" border=\"0\" title=\"";
                        print "<a href=\"#\" onmouseover=\"showToolTip(event,'$toold');return false\" onmouseout=\"hideToolTip()\"><img src=\"../img2.gif\" border=\"0\">";

The attached is the image used for the tooltip.

The problem is when the text is reduced the tooltip is shown below. How to align the bubb_bottom and bubb_middle to the bubb_top in javascript or CSS