Is it possible to format an HTML tooltip (title at

2019-01-02 18:38发布

站内问答 / 前沿技术
1238 11 4

This question already has an answer here:

Is it possible to format an HTML tooltip?

E.g. I have a DIV with attribute title="foo!". When I have text-size of my browser zoomed in or out in, the text size of the tooltip remains unchanged. Is there a way to make the tooltip font scale with the browser setting?

标签： html tooltip
举报
11条回答
姐姐魅力值爆表
2楼-- · 2019-01-02 18:55

Try using entity codes such as 
 for CR, 
 for LF, and 	 for TAB.

For example:

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>

查看更多
0人赞 添加讨论(0) 举报
若你有天会懂
3楼-- · 2019-01-02 18:59

In bootstrap tooltip just use data-html="true"

查看更多
0人赞 添加讨论(0) 举报
琉璃瓶的回忆
4楼-- · 2019-01-02 19:00

No. But there are other options out there like Overlib, and jQuery that allow you this freedom.

Personally, I would suggest jQuery as the route to take. It's typically very unobtrusive, and requires no additional setup in the markup of your site (with the exception of adding the jquery script tag in your <head>).

查看更多
0人赞 添加讨论(0) 举报
萌妹纸的霸气范
6楼-- · 2019-01-02 19:03

Better late than never, they always say.

Normally I'd use jQuery to solve such a situation. However, when working on a site for a client which required a javascript-less solution, I came up with the following:

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

By using the following css, you get the same situation as with a title:

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

This gives you the option to style it according to your needs as well, and it works in all browsers. Even the ones where javascript is disabled.

Pros:

  • You have a lot of influence on the styling
  • It works in (nearly) all browsers

Cons:

  • It's harder to position the tooltip
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)