0

Наводим на текст-всплывает подсказка. Как наилучшим образом реализовать подобное? введите сюда описание изображения

1

1 ответ 1

2

Ну в общем вот так это делается !

смотреть на весь экран

jQuery(document).ready(function($) {
  function l_tooltip(target_items, name) {
    $(target_items).each(function(i) {        
      $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "</p></div>");        
      var tooltip = $("#" + name + i);        
      if ($(this).attr("title") != "" && $(this).attr("title") != "undefined") {        
        $(this).removeAttr("title").mouseover(function() {                
          tooltip.css({
            opacity: 0.9,
            display: "none"
          }).fadeIn(30);        
        }).mousemove(function(kmouse) {                
          tooltip.css({
            left: kmouse.pageX + 15,
            top: kmouse.pageY + 15
          });        
        }).mouseout(function() {                
          tooltip.fadeOut(10);        
        });        
      }    
    });
  }
  l_tooltip(".ttp_lnk a", "tooltip");
});
.tooltip {
  z-index: 999;
  left: -9999px;
  top: -9999px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 11px;
  color: #323232;
  padding: 4px 8px;
  position: absolute;
  width: 200px;
}

.tooltip p {
  margin: 0px;
  padding: 0px;
}

.ttp_lnk {
  max-width: 230px;
  text-align: center;
}

.ttp_lnk h1 {
  display: block;
  width: 200px;
}

img {
  display: block;
  max-width: 200px!important;
  max-height: 150px;
  margin-right: 15px;
}

.ppt_p {
  padding: 20px;
  font-size: 18px;
  width: 200px;
}
<div class="ttp_lnk">
  <a href="#" title="<h1>Это пример универсальной всплывающей подсказки на jQuery</h1> Это нормальный текст<b>Это жирный текст</b><br /><i>Это наклонный текст</i><s>Это зачёркнутый текст</s><b style='color: red;'>Это жирный текст красного цвета</b>Ещё<sub>совсем</sub>немного<sup>текста</sup><img src='http://www.memphiswebprogramming.com/sites/default/files/pictures/jquery-modern-logo.jpg' />Вобщем видно что можно использовать форматирование текста в данном тултипе, так же как и картнинки, но пока есть загвоздка с картинками-ссылками.<br /> Применение данного тултипа ОЧЕНЬ широко, стоит только включить воображение.">Наведите на эту ссылку курсор</a>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.