Архив Айгуст —
архив помогалки Августа
«Никто не вечен… В отличие от знаний»
Внимание!
  Материалы на данном сайте представляют собой архивную копию форума «Айгуст - помогалка Августа» на момент октября 2019 года с целью сохранения знаний. Все права на материалы принадлежат их авторам. Материалы представлены в открытый доступ в ознакомительных целях, запрещено их коммерческое использование без согласования с авторами. Администрация сайта не несёт ответственности за содержание материалов, в том числе за наличие вредоносных закладок в коде, используйте любой предоставленный код на свой страх и риск. Рекомендуется проверять любые файлы вручную и перезаливать на собственный хостинг, дабы избежать возможной модификации или исчезновения в будущем.

Создаём подсказки для кнопок(jquery).

02.09.2010 04:11:55
Создаём подсказки для кнопок(jquery).

Итак расскажу вам способ, который когда то давно я нашел.
Для этого нам понадобится jquery+ ещё пару скриптов.
Ну и конечно же css.
[изображение]
<script type="text/javascript" src="https://igust4u-archive.ga/chats/jquery.js"></script>
<script type="text/javascript">
/*
* Easy Tooltip 1.0 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/

(function($) {

$.fn.easyTooltip = function(options){

// default configuration properties
var defaults = {
xOffset: -35,
yOffset: 30,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};

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;
$(this).attr("title","");
if (content != "" && content != undefined){
$("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
$("#" + options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
.css("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")
.css("left",(e.pageX + options.xOffset) + "px")
});
if(options.clickRemove){
$(this).mousedown(function(e){
$("#" + options.tooltipId).remove();
$(this).attr("title",title);
});
}
});

};

})(jQuery);
</script>
<style type="text/css">
html, body {
background:#000;
margin:0;
padding:0;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:15px;
font-weight: bold;
color: #00ff00;
text-align: center;
}
a {
color: #FFF;
}
#easyTooltip{
padding: 0 10px 0 10px;
border:1px solid #FFF;
background:#00ff00 repeat-x;
color: #000;
font-size: 13px;
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("a").easyTooltip();
});
</script>
</head>
<br><br><br><br><br><br><br><br>
<div align="center">
<a href="/" title="Подсказка">Подсказка</a>
</div>

Итак рассмотрим.
1. Первый скрипт это очевидно, это jquery.
Рассмотрим второй.
(function($) {

$.fn.easyTooltip = function(options){

// default configuration properties
var defaults = {
xOffset: -35,
yOffset: 30,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};

xOffset: -35, - это переменная отвечающая фиксацию по горизонтали.
yOffset: 30, - это переменная отвечающая фиксацию по вертикали.

Если поставить допустим xOffset: 35 - то подсказка будет отображаться правее от самой кнопки/ссылки.
Если поставить xOffset: -35 - то левее.
Если поставить допустим yOffset: -30 - то подсказка будет отображаться ниже от самой кнопки/ссылки.
Если поставить yOffset: 30 - то выше.
Третий скрипт мы не трогаем.

2. Дальше смотрим стиль - easyTooltip.
#easyTooltip{
padding: 0 10px 0 10px;
border:1px solid #FFF;
background:#00ff00 repeat-x;
color: #000;
font-size: 13px;
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

padding: 0 10px 0 10px; - это функция которая задает внутреннее со всех сторон поле (расстояние между текстом (элементом) и рамкой обрамляющей текст (элемент). То есть в данный момент это отступ с права и слева на 10 пикселей.Меняем на свой.
border:1px solid #FFF; - это толщина и стиль рамки. В данном случае толщина 1 пиксель, цвет белый. Меняем на свой.
background: #00ff00 repeat-x; - фоновое изображение и цвет фона элемента. В данном случае это зелёный цвет. Меняем только цвет на свой.
color: #000; - это цвет текста. В данном случае это белый цвет. Меняем на свой.
font-size: 13px; - размер текста. Меняем на свой, в пикселях.
font-weight: bold; - Устанавливает насыщенность (жирность) шрифта. Можно убрать, если захотите.
-moz-border-radius: 5px; и -webkit-border-radius: 5px; - это обрамления углов для подсказки. Я думаю больше или меньше ставить ненужно.
Стили "body" и "a" я создал для красоты.


Итак после того как настроили под себя скрипт, его можно сохранить себе на хостинг или же оставить в таком виде.
Со стилями тоже самое, либо хостинг либо так.

Теперь если мы поставим тег title к ссылке, у нас будет выскакивать подсказка.
<a href="/" title="Подсказка">Подсказка</a>



#878

Другие темы раздела