Why is the edge browser enforcing a artifical lenght limit for the title attribute?

PMLP (Peter Mølgaard Pallesen) 21 Reputation points
2022-09-01T06:48:26.427+00:00

In the HTML5 speicifications there are no length limit on the title attribute. But in practice long title strings get truncated see image. Which is a real shame, in my domain we are building very complex applications, which often needs allot of text to explain. And the title is very good for that it has a very good on hovering ability and the formats are very nice and there are no CSS concerns because it is build in.

The only problem is that there is an artificial limit on the long the title can be (I think it is 1024). Which is not in the specs. Which is much shorter than Firefox 3250. According to https://stackoverflow.com/questions/8516235/max-length-of-title-attribute

I know that in the general case long texts are not the best UX. But in practice this will make the same website worse in edge compared to firefox.

Hope somebody can help me understand it better

![236774-image.png]1

Microsoft Edge | Microsoft Edge development
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Anonymous
    2022-09-02T09:32:41.853+00:00

    Hi @PMLP (Peter Mølgaard Pallesen)

    I have tested and found that chromium based browser has the 1024 title length limit. I think that's by design in chromium and we can't change it. I suggest that you can provide feedback to Edge team by pressing Alt+Shift+I in Edge if you have any suggestions about the length limit.

    Besides, I suggest that you can create your own mouse hover tooltip so that you can get rid of the title length limit. You can use the sample code like below. It's just a simple sample, you can create your own hover tooltip style according to your demands:

    <style>  
            .tooltip .tooltiptext {  
                visibility: hidden;  
                width: 600px;  
                background-color: black;  
                color: #fff;  
            }  
      
            .tooltip:hover .tooltiptext {  
                visibility: visible;  
            }  
    </style>  
      
    <div class="tooltip">  
        Hover here<span class="tooltiptext">mouse hover tooltip</span>  
    </div>  
    

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Regards,
    Yu Zhou

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.