Основная подсказка (jQuery) - PullRequest
Новая
       7

Основная подсказка (jQuery)

2 голосов
/ 08 апреля 2010

HTML: 

<a href="#" rel="tooltip">Open Tooltip</a>
<div id="tooltip">Tooltip Content</div>

Я проверил некоторые плагины всплывающей подсказки, но мое требование - это действительно базовая подсказка, которая показывает скрытый div при наведении курсора.У всех плагинов слишком много расширенных опций, которые мне не нужны, и уже есть стилизованные всплывающие подсказки, которые может быть сложно изменить.

Буду признателен за любую помощь.Спасибо.

Ответы [ 7 ]

8 голосов
/ 08 апреля 2010

Вы можете свернуть свои собственные.

Я предлагаю просто сохранить свойства clientX и clientY объекта события мыши, который передается в обработчик события onmouseover.Затем установите позицию CSS на экране (left, top) скрытого элемента div в соответствии с этими координатами, и вы станете золотым. Убедитесь, что CSS-свойство div position имеет значение absolute

Быстрый непроверенный пример, чтобы дать вам представление: 

$( '[rel="tooltip"]' ).hover( function(e) {
   var x = e.clientX;
   var y = e.clientY;
   _div.css( { top: y, left: x, position: 'absolute' } )
       .fadeIn();
}, function() {
    _div.fadeOut();
} );
4 голосов
/ 08 апреля 2010

Вот код для действительно простой всплывающей подсказки CSS, которую я использую:

CSS: 

  .name a:hover {
background:#ffffff; 
text-decoration:none;
}

.name a.tooltip span {
display:none; 
padding:5px; 
margin-left:108px; 
width:100px;
}

.name a.tooltip:hover span {
display:inline; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#000000;
top:5px;
left:-15px;
}

Свойства top и left позволяют плавать над текстом.Измените это, чтобы разместить его там, где вам нравится.Кроме того, измените display:inline; на display:block;, если вы хотите, чтобы он вел себя как обычный div для позиционирования.

HTML: 

     <div class="name">
       Name 
        <a class="tooltip" href="#">
          Tooltip
             <span>
               Tooltip text here.
             </span>
        </a>.
     </div>
2 голосов
/ 07 мая 2014

Вот еще более базовая подсказка: http://jsfiddle.net/WH7Kf/54/

скрывает подсказку: 

.tooltip span {
display:none; 
}

Показывает подсказку: 

.tooltip:hover span {
display:inline; 
}
1 голос
/ 08 апреля 2010

, если вы просто хотите показать div при использовании наведения мыши: 

$('a[rel="tooltip"]').hover(
   function(){ $('#tooltip').show() }, //or maybe use fadeIn() instead of .show() 
   function(){ $('#tooltip').hide() }
)

вы можете интегрировать решение markcial в функции, чтобы div подсказки появлялся рядом с вашим курсором.

будет выглядеть так 

$('a[rel="tooltip"]').hover(
   function(e){ $('#tooltip').css({ position:'absolute', top:e.pageY, left:e.pageX }).show() }, //or maybe use fadeIn() instead of .show() 
   function(){ $('#tooltip').hide() }
)
0 голосов
/ 30 декабря 2018

Плагины обычно обширны.Лучше что-нибудь написать самому.Добавьте атрибут к любому элементу на странице: tooltip = "content".Вы можете изменить внешний вид так, как вам нравится, я добавил только то, что нужно для CSS.

//tooltip v. 1.0 by Krzysztof Antosik
//show tooltip	
function tooltipShow(){	
if(typeof($("#tooltip")) != "undefined" && $("#tooltip") !== null){
		$("#tooltip").remove();
	}
	var title = $(this).attr("tooltip");
	$("body").append("<span id=\"tooltip\">" + title + "</span>")
}

//hide tooltip				
function tooltipHide() {
	$("#tooltip").remove();
}
//run tooplip
$("[tooltip]").hover(tooltipShow, tooltipHide);
//move tooltip
$("[tooltip]").on('mousemove', function(e){
	var positionY = $(this).offset().top - $(window).scrollTop();
	var positionX = $(this).offset().left - $(window).scrollLeft();
	var endX = $(document).width() - 70;
	var margin = 30;
		//on top
		if ((positionX > 50) && (positionX < endX)){
			if(positionY <= (40)){
				var fixX = - $("#tooltip").width()/2;
				var fixY = margin;
			}else {
				var fixX = - $("#tooltip").width()/2;
				var fixY = - margin;
			}
		//on feft
		}else if(positionX <= 50){
			var fixX = margin;
			var fixY = - $("#tooltip").height()/2;
		//on right
		}else if(positionX >= endX){
			var fixX = - (margin * 2/3) - $("#tooltip").width() ;
			var fixY = - $("#tooltip").height()/2;	
		}
	$('#tooltip').css({
		left:  e.pageX + fixX, 
		top:   e.pageY + fixY
	});
});
#tooltip{
	background-color: black;
	color: white;
	text-align: right;
	position: fixed;
	z-index: 6;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/src/css/tooltip.css">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="sample" tooltip="1" style="position:fixed; left:300px; top:40px; background-color:red; height:30px;width:30px;">aaa</div>
<div class="sample" tooltip="2" style="position:fixed; left:30px; top:40px; background-color:red; height:30px;width:30px;">aaa</div>
<div class="sample" tooltip="3" style="position:fixed; left:30px; top:300px; background-color:red; height:30px;width:30px;">aaa</div>
<div class="sample" tooltip="4" style="position:fixed; left:30px; bottom:40px; background-color:red; height:30px;width:30px;">aaa</div>
<div class="sample" tooltip="5" style="position:fixed; left:300px; bottom:40px; background-color:red; height:30px;width:30px;">aaa</div>
<div class="sample" tooltip="6" style="position:fixed; right:3px; bottom:100px; background-color:red; height:30px;width:30px;">aaa</div>
</body>
<script src="tooltip.js"></script>
</html>
0 голосов
/ 15 января 2015

Я искал то же самое, но без javascript или jquery. Я нашел следующий способ с использованием чистых переходов CSS3.

CSS3 

a.tooltip span
{
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
  width: 250px;
  height: auto;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  border-radius: 6px;
  padding: 2px;
  text-align: center;
  background: #000;
  border: 1px solid #808080;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 2s ease-out 0s;
  -moz-transition: all 2s ease-out 0s;
  -ms-transition: all 2s ease-out 0s;
  -o-transition: all 2s ease-out 0s;
  transition: all 2s ease-out 0s;
}
a:hover.tooltip span
{
  visibility: visible;
  -webkit-opacity: 0.90;
  -moz-opacity: 0.90;
  opacity: 0.90;
}

HTML 

<a class="tooltip" href="#">Hover Me
    <span>Some text information that you want to display in tooltip</span></a>

Для получения более подробной информации о демонстрационной версии, посетите Пример всплывающей подсказки с использованием переходов CSS3 здесь.

0 голосов
/ 08 апреля 2010 
$('a[rel=tooltip]').bind('mouseover',function(e){
  e=e?e:window.event;
  $('#tooltip').css({
    position:'absolute',
    top:e.pageY,
   left:e.pageX
  });
})
...