Показать сообщение отдельно
  #13 (permalink)  
Старый 15.01.2014, 19:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Простая подсказка
XaPu3Ma,
вы определитесь что будет источником информации для подсказки ... давайте я сделаю это за вас
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#easyTooltip {
   font-size: 32px;
}
span{
  color: #FF00FF;
}

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function ($) {
    $.fn.easyTooltip = function (options) {
        var defaults = {
            xOffset: 10,
            yOffset: 25,
            tooltipId: "easyTooltip",
            clickRemove: false,
            content: "",
            useElement: "",
            source: null
        };
        var options = $.extend(defaults, options);
        var content;
        this.each(function () {
            var title = $(this).attr("title");
            $(this).hover(function (e) {
                content = options.content != "" ? options.content : title;
                content = options.useElement != "" ? $("#" + options.useElement).html() : content;
                content = typeof options.source == "function" ? options.source(this) : content;
                $(this).attr("title", "");
                if (content != "" && content != undefined) {
                    $("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
                    $("#" + options.tooltipId)
                    .css({"position": "absolute",
                          "top": e.pageY - options.yOffset + "px",
                          "left": e.pageX + options.xOffset + "px",
                          "display": "none"}).fadeIn("fast")
                }
            }, function () {
                $("#" + options.tooltipId).remove();
                $(this).attr("title", title)
            });
            $(this).mousemove(function (e) {
                $("#" + options.tooltipId).css({"top": e.pageY - options.yOffset + "px",
                "left": e.pageX + options.xOffset + "px"})
            });
            if (options.clickRemove) $(this).mousedown(function (e) {
                $("#" + options.tooltipId).remove();
                $(this).attr("title", title)
            })
        })
    }
})(jQuery);
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$("a").easyTooltip({
			source: function (el)
{
  return $(el).data('title')+'<span> и тихий ужас</span>'
}
		});
	});
</script>
</head>
<body>
<a href="#"  data-title='Фигня'><img src="http://javascript.ru/forum/images/smilies/write.gif" /></a><br>
<a href="#"  data-title='Супер Фигня'><img src="http://javascript.ru/forum/images/smilies/cray.gif" /></a>
</body>
</html>

вместо самого контента в data-title можно хранить id элемента с нужным содержимым

Последний раз редактировалось рони, 15.01.2014 в 19:16.
Ответить с цитированием