Я думал, что выложу здесь свое решение на 20 строк JavaScript. Это не идеально, но может быть полезно для некоторых в зависимости от того, что вам нужно из ваших подсказок.
Когда его использовать
- Автоматически стилизует всплывающую подсказку для всех элементов HTML с определенным атрибутом
TITLE (сюда входят элементы, динамически добавляемые в документ в будущем)
- Никаких изменений или взломов Javascript / HTML для каждой подсказки (только атрибут
TITLE, семантически чистый)
- Очень легкий (добавляет около 300 байтов в сжатом и сжатом виде)
- Вам нужна только базовая всплывающая подсказка
Когда НЕ использовать
- Требуется jQuery, поэтому не используйте, если вы не используете jQuery
- Плохая поддержка вложенных элементов, которые имеют всплывающие подсказки
- Вам нужно более одной всплывающей подсказки на экране одновременно
- Вам понадобится всплывающая подсказка, чтобы исчезнуть через некоторое время
код
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
Вставьте его куда угодно, он должен работать, даже если вы запустите этот код до того, как DOM будет готов (он просто не покажет ваши всплывающие подсказки, пока DOM не будет готов).
Настройка
Вы можете изменить объявления var во второй строке, чтобы немного их настроить.
var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor
Style
Теперь вы можете стилизовать всплывающие подсказки, используя следующий CSS:
#tooltip {
background: #fff;
border: 1px solid red;
padding: 3px 10px;
}