Свій стиль для підказки за допомогою jQuery

58

Свой стиль для подсказки с помощью jQuery

Всім знову привіт!
Як не важко здогадатися з назви, сьогодні хочу розповісти про черговий спосіб оформлення і виведення підказок на сторінки сайту. Способів багато і всі вони різні, як за якістю виконання, так і за функціональними можливостями. В цьому плані існує величезний вибір, на будь-який смак і колір, від самих простеньких і непоказних, до наворочених, з підключенням в роботу різних спеціалізованих плагінів. Як-то я розписував один із таких способів в статті : «Підказка до ссылке з фоном.», цікавий і доволі простий метод. Але прогрес не стоїть на місці і сучасні технології дозволяють спростити весь процес.

Давайте подивимося, як з допомогою невеликого jQuery плагін та магії CSS, можна реалізувати і видозмінити підказки відображаються браузером. Для початку, щоб не порушувати традиції, можете подивитися приклад роботи скрипта:

Дивитися Демо

Невеликий за розміром (3 КБ) скрипт для відображення підказок, працює так само, як стандартні підказки браузера, але має декілька варіантів виведення і стилів оформлення за допомогою CSS. За замовчуванням, скрипт обробляє будь-який елемент з title=”” атрибутом, такі як посилання, зображення, параграфи тексту і т. д…

HTML

Для того щоб усе це запрацювало, необхідно плагін jquery.style-my-tooltips.js і файл стилів style-my-tooltips.css підключити до документа(сторінки html), прописавши повний шлях в голові сторінки, у розділі…, javascript все ж краще, з багатьох причин, розмістити внизу, безпосередньо перед закриваючим тегом .

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">
<script src="jquery.style-my-tooltips.js" type="text/javascript">
<script>
$().ready(function() {
$("[title]").style_my_tooltips({
tip_follows_cursor: "on", //on/off
tip_delay_time: 1000 //milliseconds
});
});

$().ready(function() {
$(“[title]”).style_my_tooltips({
tip_follows_cursor: “on”, //on/off
tip_delay_time: 1000 //milliseconds
});
});

Бібліотеку jQuery, у прикладі, підключаємо безпосередньо з серверів Google, у вас може бути бібліотека вже підключена, так що не забувайте перевірити повний шлях до виконуючих файлів.

Раздербанивать «фарш» нашої підказки ми почнемо з формування стилів CSS.

CSS

Готовий набір правил для формування підказок, розташований в окремому файлі стилів style-my-tooltips.css. У прикладі використано властивість з обойми CSS3, плавне закруглення кутів тіла підказки, градієнти і трішки тіні, при цьому тормознутый IE (старих версій), тупо буде видавати прямокутну підказку, цілком ігнорувати градієнти і тінь, ну та й х… з ним.

#s-m-t-tooltip {
 position:fixed;
max-width:300px;
padding:8px;
background-color:#161616;
 /* градієнтна заливка */
background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.8) 0%, rgba(51, 51, 51, 0.8) 100%);
background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.8) 0%,rgba(51, 51, 51, 0.8) 100%);
background: linear-gradient(top, rgba(22, 22, 22, 0.8) 0%,rgba(51, 51, 51, 0.8) 100%);
z-index:10;
display:inline-block; /*important*/
/* шрифт */
font-family:Verdana, Geneva, sans-serif;
font-size:12px; /* розмір шрифту */
line-height:16px; /* висота рядка */
color:#fff;
 /*css3 закруглені кути*/
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
/* зовнішня тінь */
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

#s-m-t-tooltip {
position:fixed;
max-width:300px;
padding:8px;
background-color:#161616;
/* градієнтна заливка */
background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.8) 0%, rgba(51, 51, 51, 0.8) 100%);
background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.8) 0%,rgba(51, 51, 51, 0.8) 100%);
background: linear-gradient(top, rgba(22, 22, 22, 0.8) 0%,rgba(51, 51, 51, 0.8) 100%);
z-index:10;
display:inline-block; /*important*/
/* шрифт */
font-family:Verdana, Geneva, sans-serif;
font-size:12px; /* розмір шрифту */
line-height:16px; /* висота рядка */
color:#fff;
/*css3 закруглені кути*/
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
/* зовнішня тінь */
-webkit-box-shadow: 2px 0 5px 0 rgba(0,0,0,.16), 2px 0 10px 0 rgba(0,0,0,.12);
box-shadow: 2px 0 5px 0 rgba(0,0,0,.16), 2px 0 10px 0 rgba(0,0,0,.12);
}

Думаю, що з оформленням питань не виникне, так як все до неподобства просто, а для «ну дуже вже обдарованих», написав деякі пояснення до параметрами.

jQuery

Безпосередньо в самому плагіні jQuery jquery.style-my-tooltips.js не думаю, що є якась гостра необхідність проводити налаштування, все працює швидко і стабільно, але для допитливих і щоб продемонструвати начинку скрипта, наведу код плагіна:

(function($){
$.fn.style_my_tooltips = function(options) {
var defaults = {
tip_follows_cursor: "on",
tip_delay_time: 1000
};
var options = $.extend(defaults, options);
$("body").append("
"
); //create the tooltip container smtTip=$("#s-m-t-tooltip"); smtTip.hide(); //приховати return this.each(function() { function smtMouseMove(e){ smtMouseCoordsX=e.pageX; smtMouseCoordsY=e.pageY; smtTipPosition(); } function smtTipPosition(){ var cursor_tip_margin_x=0; //горизонтальне простір між курсором і підказкою var cursor_tip_margin_y=24; //вертикалі між курсором і підказкою var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth(); var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight(); if(leftOffset< =$(window).width()){ smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x); } else { var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width(); smtTip.css("left",thePosX); } if(topOffset<=$(window).height()){ smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y); } else { var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height(); smtTip.css("top",thePosY); } } $(this).hover(function(e) { // mouseover var $this=$(this); $this.data("smtTitle",$this.attr("title")); //store title var theTitle=$this.data("smtTitle"); $this.attr("title",""); //remove title to prevent native tooltip showing smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay if(options.tip_follows_cursor=="off"){ smtMouseMove(e); } else { $(document).bind("mousemove", function(event){ smtMouseMove(event); }); } }, function() { // mouseout var $this=$(this); if(options.tip_follows_cursor!="off"){ $(document).unbind("mousemove"); } clearInterval(smtTip_delay); if(smtTip.is(":animated")){ smtTip.hide(); } else { smtTip.fadeTo("fast",0); } $this.attr("title",$this.data("smtTitle")); //add title back }); function smtTip_fadeIn(){ smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);}); } }); }; })(jQuery);

(function($){
$.fn.style_my_tooltips = function(options) {
var defaults = {
tip_follows_cursor: “on”,
tip_delay_time: 1000
};
var options = $.extend(defaults, options);
$(“body”).append(”

“); //create the tooltip container
smtTip=$(“#s-m-t-tooltip”);
smtTip.hide(); //приховати
return this.each(function() {
function smtMouseMove(e){
smtMouseCoordsX=e.pageX;
smtMouseCoordsY=e.pageY;
smtTipPosition();
}
function smtTipPosition(){
var cursor_tip_margin_x=0; //горизонтальне простір між курсором і підказкою
var cursor_tip_margin_y=24; //вертикалі між курсором і підказкою
var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
if(leftOffset< =$(window).width()){
smtTip.css(“left”,smtMouseCoordsX+cursor_tip_margin_x);
} else {
var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
smtTip.css(“left”,thePosX);
}
if(topOffset<=$(window).height()){
smtTip.css(“top”,smtMouseCoordsY+cursor_tip_margin_y);
} else {
var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
smtTip.css(“top”,thePosY);
}
}
$(this).hover(function(e) {
// mouseover
var $this=$(this);
$this.data(“smtTitle”,$this.attr(“title”)); //store title
var theTitle=$this.data(“smtTitle”);
$this.attr(“title”,””); //remove title to prevent native tooltip showing
smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it
smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay
if(options.tip_follows_cursor==”off”){
smtMouseMove(e);
} else {
$(document).bind(“mousemove”, function(event){
smtMouseMove(event);
});
}
}, function() {
// mouseout
var $this=$(this);
if(options.tip_follows_cursor!=”off”){
$(document).unbind(“mousemove”);
}
clearInterval(smtTip_delay);
if(smtTip.is(“:animated”)){
smtTip.hide();
} else {
smtTip.fadeTo(“fast”,0);
}
$this.attr(“title”,$this.data(“smtTitle”)); //add title back
});
function smtTip_fadeIn(){
smtTip.fadeTo(“fast”,1,function(){clearInterval(smtTip_delay);});
}
});
};
})(jQuery);

Ось мабуть і все на цьому, тепер коли ви надасте якого-небудь елементу сторінки атрибут title=”” і заповніть його осмислено, при наведенні на цей елемент, буде виводитися чудова підказка, без будь-яких затримок і візуальної ломки.

ДемоСкачать

Сподіваюся, що цей не великий урок стане в нагоді вам в роботі над своїми проектами. Знаєте якісь цікаві рішення, пишіть в коментарях, нове-це завжди цікаво.

Матеріал підготовлений на основі публікацій: manos.malihu.gr

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: