CODEWITHSUNDEEP
htmlcss
Rayudu
Rayudu

Reputation: 1816

HTML title is looking different in Firefox browser

I am using a normal title to show tooltips on my website. I don't want to use any other tooltips on my page. I need a simple default browser title.

But in Firefox browser the title looks different. Not in all cases, just in some scenarios .

Here is the Fiddle Title Fiddle

$('.ACName').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});
.myProspectTable{
    width:463px;
    border:1px solid #a3a3a3;
}
.myProspectTable tr td{
    border-left:1px solid #a3a3a3;
    padding:5px;
}
.myProspectTable tr td:nth-child(1) div{
    width:160px;
   white-space: nowrap;
     overflow:hidden;
    text-overflow:ellipsis; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="myProspectTable">
    <tr>
        <td>
            <div class="ACName text-decoration-none">
					<span style="border-left: 3px solid #2BF300; margin-right: 5px;"></span>
                    <span style="font-weight: bold;">(AMSI) ADVANCE MACHINE &amp; TRETCHFORM INTERNATIONAL INC.</span>
			</div>
        </td>
        <td style="width:100px;">
            XXXXXXXX
        </td>
        <td style="width:100px;">
            123456
        </td>
    </tr>
</table>

For more details please see below Image. enter image description here

help me resolve this

Upvotes: 1

Views: 90

Answers (1)

dfsq
dfsq

Reputation: 193291

Title attribute respects whitespaces, however apparently browsers handle them a little differently. In you case you want to trim unwanted trailing and leading whitespace characters to achieve consistent look.

Try to use String.prototype.trim

$ele.attr('title', $ele.text().trim());

or $.trim if you want to support IE8 and below:

$ele.attr('title', $.trim($ele.text()));

Demo: http://jsfiddle.net/ajLn421s/1/

Upvotes: 3

Related Questions