97

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?

0

9 Answers 9

101

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>

4
  • 2
    Nice workaround. Thanks. Anyone test the combo of CR+LF on various browsers? I used a pair of the combo (&#009;A&#013;&#009;A&#013;) to get the appearance of two paragraphs. I wonder if that works across browsers and across platforms. Mar 27, 2016 at 0:50
  • 1
    @BasilBourque, On Win10 x64: The snippet works in Firefox 51.0.1, Chrome 56.0.2924.87 (64-bit), Edge 38.14393.0.0, IE11.576.14393.0, and Opera 42.0.2393.517.
    – Makyen
    Feb 6, 2017 at 19:25
  • 4
    this answer does not answer the question on how to adjust the font size of the tooltip with out using js.
    – Mike
    Apr 13, 2017 at 17:53
  • Didn't work for me in latest Feb 2021 Chrome. Using "\n" works fine for line breaks.
    – cakidnyc
    Feb 16, 2021 at 20:35
47

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>).

2
19

it seems you can use css and a trick (no javascript) for doing it:

http://davidwalsh.name/css-tooltips

http://www.menucool.com/tooltip/css-tooltip

http://sixrevisions.com/css/css-only-tooltips/

http://csstooltip.com

1
  • the CSS way won’t work for XP users which are forced to use IE by their companies. It represent a large number of users in my country (many companies still use XP the same way they still used 2000 four years ago). Dec 21, 2014 at 15:38
7

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
3
  • Thanks. I think that's the most clean solution.
    – Grozz
    Aug 21, 2015 at 21:12
  • 1
    The tooltip element cannot extend beyond the parent element.
    – jumxozizi
    Nov 25, 2016 at 13:59
  • I did not have that issue myself. Do you have an example of that? If not, I think I could make a working example for you, if you wish. Nov 28, 2016 at 9:57
3

Not sure if it works with all browsers or 3rd party tools, but I have had success just specifying "\n" in tooltips for newline, works with dhtmlx in at least ie11, firefox and chrome

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}
1
  • Using "\n" is all I needed in 2021, works in Chrome, FF & Edge.
    – cakidnyc
    Feb 16, 2021 at 20:34
3

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

3
  • 2
    someone has down voted this answer, but before doing so, i suggest to know everything. Because this answer is correct and we can format following tool tip by setting data-html to true: <i class="glyphicon glyphicon-info-sign" data-placement="right" data-html="true" data-title="Hey, <br/> this is tool tip" rel="tooltip"></i>
    – Nabin
    Jul 17, 2019 at 21:24
  • 1
    Indeed it works, it's the solution I used. See getbootstrap.com/docs/4.1/components/tooltips
    – learner
    Oct 30, 2019 at 14:51
  • 1
    Question has nothing to do with bootstrap and adding it a project just to get tooltips would be a huge overkill.
    – cakidnyc
    Feb 16, 2021 at 20:32
2

No, it's not possible, browsers have their own ways to implement tooltip. All you can do is to create some div that behaves like an HTML tooltip (mostly it's just 'show on hover') with Javascript, and then style it the way you want.

With this, you wouldn't have to worry about browser's zooming in or out, since the text inside the tooltip div is an actual HTML, it would scale accordingly.

See Jonathan's post for some good resource.

1

Mootools also has a nice 'Tips' class available in their 'more builder'.

0

I know this is an old post but I would like to add my answer for future reference. I use jQuery and css to style my tooltips: easiest-tooltip-and-image-preview-using-jquery (for a demo: http://cssglobe.com/lab/tooltip/02/) On my static websites this just worked great. However, during migrating to Wordpress it stopped. My solution was to change tags like <br> and <span> into this: &lt;br&gt; and &lt;span&gt; This works for me.

Not the answer you're looking for? Browse other questions tagged or ask your own question.