02.09.2010 04:11:55
Создаём подсказки для кнопок(jquery).
Итак расскажу вам способ, который когда то давно я нашел.
Для этого нам понадобится jquery+ ещё пару скриптов.
Ну и конечно же css.
<script type="text/javascript" src="https://igust.servis4u.top/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>
<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: ""
};
$.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;
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>