КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Всплывающая подсказка в стиле ООП

// всплывающая подсказка
function Tooltip(){// конструктор
  this.tooltip = document.createElement('div');
  this.tooltip.style.position = 'absolute';
  this.tooltip.style.visibility = 'hidden';
  // в css определяем стили для блока подсказки класс tooltip
  this.tooltip.className = 'tooltip';
}

// для показа подсказки
Tooltip.prototype.show = function(text, x, y){
  this.tooltip.innerHTML = text;
  this.tooltip.style.left = x + 'px';
  this.tooltip.style.top = y + 'px';
  this.tooltip.style.visibility = 'visible';
  if(this.tooltip.parentNode != document.body){
    document.body.appendChild(this.tooltip);
  }
}

// для скрытия
Tooltip.prototype.hide = function(){
  this.tooltip.style.visibility = 'hidden';
}

// создаём обьект "класса" Tooltip
var t = new Tooltip();

// определяем функции, которые будут вызываться при наведении и уходе курсора мыши::
function mouseMoveHandler(e){
  e = e || window.event;
  t.show('Hi, i`m a tolltip!', e.clientX + 10, e.clientY + 10);
}
function mouseOutHandler(){
  t.hide();
}

// после загрузки страницы вешаем методы 
window.onload = function(){
  var d = document.getElementById('text'); // элемент. на котором устанавливается  подсказка
  d.onmousemove = mouseMoveHandler;
  d.onmouseout = mouseOutHandler;
}    
Конечно, проще хранить текст подсказки в каком-нибудь атрибуте элемента, например в data-title. Домашнее задание - реализовать и доложить
2015.08.04 84

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика