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

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

Всплывающие подсказки на jQuery

Стандартные всплывающие подсказки задаются с помощью атрибута title, но выглядят они не очень, канешно :) Будем сделать их на jQuery:
HTML-код:
<span>Без подсказки</span>
<br/><br/>
<span data-title="Я подсказка :)">Просто подсказка с текстом</span>
<br/><br/>
<div data-title="Текст<br></div>подсказки с <b>html</b> <i>тегами</i> внутри">
Подсказка с HTML-тэгами унутри</div>
<br/>
<span id="youtube" data-title='<iframe width="560" height="315" 
src="https://www.youtube.com/embed/aW3jXRSqOno"
frameborder="0" allowfullscreen></iframe>'>
Подсказка с html тегами</span>
<span data-title="<b>подсказка с изображением</b><br/><img src='img/jquery.png' 
    style='width: 200px;'>">Подсказка с картинкой</span>
CSS:
.class_tooltip{
  background-color: #e6a348;
  border: 1px solid #000;
  border-radius: 0 7px 7px;
  display: none;
  padding: 5px;
  position: absolute;  
}
И jQuery:
/* функция для создания подсказок для элементов
  element - имя элемента, например span */
function init_tooltip(element){
  // перебираем все элементы на странице, для которых нужна подсказка
  $(element).each(function(num){
    // проверяем у элемента наличие атрибута data-title и смотрим пустой он или нет
    if( $(this).attr('data-title') != "" && typeof($(this).attr('data-title')) != "undefined"){
      // если есть title, то
      // создаем скрытый блок - подсказку с текстом
      $("body").append("<span class='class_tooltip tooltip_" + element + num + "'>" + $(this).attr('data-title') + "</span>");
      // элемент, сама подсказка, только что созданная
      var one_tooltip = $(".tooltip_" + element + num);
      // навешиваем действия на события 
      // при наведении курсора
      $(this).mouseover(function(){
        // показываем подсказку
        one_tooltip.fadeIn(100);
      });
      // при отведении курсора
      $(this).mouseout(function(){
        // скрываем подсказку
        one_tooltip.fadeOut(100);                  
      });
      // при нахождении курсора на элементе
      $(this).mousemove(function(curs_position){
        // смещаем подсказку за курсором
        one_tooltip.css({
          // делаем отступ по 10 пикселей сверху и слева от курсора
          left: curs_position.pageX + 10, 
          top: curs_position.pageY + 10
        });
      });
    }
  });
}
 
$(document).ready(function(){
  // создаем подсказки для всех span`ов
  init_tooltip("span");
  init_tooltip("div");
  $('#youtube').click(function(){
    var video = $(this).attr('data-title');
    $('body').append('<br><br>' + video);
  });
});
И на чистом яваскрипте:
// всплывающая подсказка
function Tooltip(){ // конструктор
  this.tooltip = document.createElement('div');
  this.tooltip.style.position = 'absolute';
  this.tooltip.style.visibility = 'hidden';
  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';
}
window.onload = function(){
  var d = document.getElementById('text'); // элемент. на котором устанавливается  подсказка
  d.onmousemove = mouseMoveHandler;
  d.onmouseout = mouseOutHandler;
}

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();
}
Смотрим пример, качаем, качаем, качаем! :)))
2015.06.02 69
jpgjpg

Два программиста едут в переполненном автобусе. Один — другому: — Что то у меня с писюком! (толпа замирает) — А что с ним? — Да встает часто... — Может вирус какой? — Да проверял, все стерильно... — А висит хорошо? — Крепко, тремя пальцами не поможешь...
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


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