Форум

Marshal · #1 (**permalink**) 04.06.2011, 22:20

Подсказка всплывает справа от мыши, а надо также сделать и слева от мыши.Заранее спасибо: вот код.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Всплывающие подсказки</title>

<style>
span {
display:none;
position:absolute;
z-index:1000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.tooltip-style1 {
background:#5a85a5 url(onebit_47.png) 10px center no-repeat;
color:white;
min-height:auto;
opacity:0.9;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
}

.tooltip-style2 {
background:#363636;
padding:3px;
color:white;
text-align:center;
}

.tooltip-style3 {
background:#e8e8e8;
color:black;
padding:15px;
}
pre {
font-size:10px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tooltips").hover(
function() { $(this).contents("span:last-child").css({ display: "block" }); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);

$(".tooltips").mousemove(function(e) {
var mousex = e.pageX + 15;
var mousey = e.pageY + 5;
$(this).contents("span:last-child").css({ top: mousey, left: mousex });
});
});
</script>

</head>

<body>

<div class="container_16">
<div id="header_container" class="grid_16">
<div id="header_wrapper" class="tooltips">
jQuery Tooltip Demo <pre>(mouse over container)</pre><span class="tooltip-style1"><img src="tooltip/web-1.jpg"></span>
</div>
</div>

<div id="nav_container" class="grid_3">
<div id="nav_wrapper" class="tooltips">
Sample Navigation <pre>(mouse over container)</pre><span class="tooltip-style3">This is a normal tooltip</span>
</div>
</div>

<div id="footer_container" class="grid_16">

</div>

</div>

</body>
</html>

Abraham · #2 (**permalink**) 05.06.2011, 01:30

<head>

<style>
span {
display:none;
position:absolute;
z-index:1000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.tooltip-style1 {
background:#5a85a5 url(onebit_47.png) 10px center no-repeat;
color:white;
min-height:auto;
opacity:0.9;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
}

.tooltip-style2 {
background:#363636;
padding:3px;
color:white;
text-align:center;
}

.tooltip-style3 {
background:#e8e8e8;
color:black;
padding:15px;
}
pre {
font-size:10px;
}
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tooltips").hover(
function() { $(this).contents("span:last-child").css({ display: "block" }); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);


$(".tooltips").mousemove(function(e) {
var mousex = e.pageX + 15;
var mousey = e.pageY + 5;
$(this).contents("span:last-child").css({ top: mousey, left: mousex });
});
});
</script>
</head> 
<div class="tooltips">
jQuery Tooltip Demo <pre>(mouse over container)</pre><span class="tooltip-style1"><img src="tooltip/web-1.jpg"></span>
</div>

а как в нём <div> сменить на что нибудь другое? на <tr> например?
как я только меняю, перестаёт работать всплывающее окно

SkyLight · #3 (**permalink**) 05.06.2011, 10:45

Вы бы хоть сначала разобрались, что и как работает, а уж потом пытались что-то менять. Сейчас вы идете вслепую, поэтому и получается чушь. Вам строки 48 и 49 о чем-нибудь говорят? И зачем вам менять див на tr?

Abraham · #4 (**permalink**) 05.06.2011, 14:52

Сообщение от SkyLight

И зачем вам менять див на tr?

Нужно что бы подсказка появлялась на одном слове в предложении, с див появляется на всём предложении

SkyLight · #5 (**permalink**) 05.06.2011, 17:15

А что изменится, если вы сделаете вместо дива таблицу? Скажу по секрету: не изменится ровным счетом ничего. Для того, чтобы понять, как и почему всплывает попап, внимательно изучите строки 41 и 47.

Форум

Справочник

Discord чат

Курсы javascript