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?
Mootools also has a nice 'Tips' class available in their 'more builder'.
Try using entity codes such as 
 for CR, 
 for LF, and 	 for TAB.
For example:
<div title="1)	A
2)	B">Hover Me</div>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
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];
}
In bootstrap tooltip just use data-html="true"
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.
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: <br> and <span>
This works for me.
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.
Mootools also has a nice 'Tips' class available in their 'more builder'.
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
In bootstrap tooltip just use data-html="true"
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: <br> and <span>
This works for me.
Mootools also has a nice 'Tips' class available in their 'more builder'.
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.
Try using entity codes such as 
 for CR, 
 for LF, and 	 for TAB.
For example:
<div title="1)	A
2)	B">Hover Me</div>Mootools also has a nice 'Tips' class available in their 'more builder'.
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];
}
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.
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.
Source: Stackoverflow.com