Всплывающая подсказка, добавляемая к изображениям через параметр title тега <img>, является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и ее настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых атрибута — position со значением absolute, он задает абсолютное позиционирование слоя, display со значением none скрывает слой и width задает ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 1).

#floatTip {
 position: absolute; /* Абсолютное позиционирование */
 width: 250px; /* Ширина блока */
 display: none; /* Прячем от показа */
 border: 1px solid #000; /* Параметры рамки */
 padding: 4px; /* Поля вокруг текста */
 font-family: sans-serif; /* Рубленый шрифт */
 font-size: 9pt; /* Размер шрифта */
 color: #333; /* Цвет текста */
 background: #ffe5ff; /* Цвет фона */
}

document.onmousemove = moveTip;
function moveTip(e) {
 floatTipStyle = document.getElementById("floatTip").style;
 w = 250; // Ширина слоя

 // Для браузера IE
 if (document.all) { 
 x = event.x + document.body.scrollLeft; 
 y = event.y + document.body.scrollTop; 

 // Для остальных браузеров
 } else { 
 x = e.pageX; // Координата X курсора
 y = e.pageY; // Координата Y курсора
 }

 // Показывать слой справа от курсора 
 if ((x + w + 10) < document.body.clientWidth) { 
 floatTipStyle.left = x + 'px';

 // Показывать слой слева от курсора
 } else { 
 floatTipStyle.left = x - w + 'px';
 }
 // Положение от верхнего края окна браузера
 floatTipStyle.top = y + 20 + 'px';
}

function toolTip(msg) {
 floatTipStyle = document.getElementById("floatTip").style;
 if (msg) {

 // Выводим текст подсказки
 document.getElementById("floatTip").innerHTML = msg;
 floatTipStyle.display = "block"; // Показываем слой
 } else { 
 floatTipStyle.display = "none"; // Прячем слой
 } 
}

document.onmousemove = moveTip;
function moveTip(e) {
 floatTipStyle = document.getElementById("floatTip").style;
 w = 250; // Ширина слоя

 // Для браузера IE
 if (document.all) { 
 x = event.x + document.body.scrollLeft; 
 y = event.y + document.body.scrollTop; 

 // Для остальных браузеров
 } else { 
 x = e.pageX; // Координата X курсора
 y = e.pageY; // Координата Y курсора
 }

 // Показывать слой справа от курсора 
 if ((x + w + 10) < document.body.clientWidth) { 
 floatTipStyle.left = x + 'px';

 // Показывать слой слева от курсора
 } else { 
 floatTipStyle.left = x - w + 'px';
 }
 // Положение от верхнего края окна браузера
 floatTipStyle.top = y + 20 + 'px';
}

function toolTip(msg) {
 floatTipStyle = document.getElementById("floatTip").style;
 if (msg) {

 // Выводим текст подсказки
 document.getElementById("floatTip").innerHTML = msg;
 floatTipStyle.display = "block"; // Показываем слой
 } else { 
 floatTipStyle.display = "none"; // Прячем слой
 } 
}