VPF::Всплывающая подсказка - Форум программистов

Jax

Дата 26.1.2006, 11:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 7.2.2005

Репутация: нет
Всего: нет

Есть такой код:

Код

ToolTip.offsetX=20; //смещения подсказки от курсора
ToolTip.offsetY=10; //
function ToolTip(obj, text) {
  if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
  //-- Разметка подсказки ---
  var tip=document.createElement("DIV");
  tip.className="tool_tip";
  tip.innerHTML=text;
  document.body.appendChild(tip);
  //-- события --
  obj.onmouseout=function (ev) {
      tip.style.visibility="hidden";
  };
  obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
      tip.style.visibility="visible";
      if(window.event) ev=window.event;
      tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
      tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
  };
}
//переберем заданные элементы, дадим подказку тем у кого есть аттрибут tooltip
//В аргументах передаем имена рассматриваемых тегов, * все теги
function initToolTips() {
//   return;
    var tags, tooltext;
    for(var i=0; i<arguments.length; i++) {
       tags=document.body.getElementsByTagName(arguments[i]);
       for(var j=0; j<tags.length; j++)
            if((tooltext=tags[j].getAttribute("tooltip"))) ToolTip(tags[j], tooltext);
   }
}

Но есть несколько проблем.
1. Если разрешение монитора очень маленькое, то подсказка уезжает вправо и получается, что страница разъезжается.
2. Если делать по X, Y то то же самое, приходится ставить после слов <br>, как можно сделать ее фиксированной что ли или еще что-нибудь придумать?

Спасибо.

Это сообщение отредактировал(а) Jax - 26.1.2006, 12:06

LSD

Дата 26.1.2006, 11:52 (ссылка)

(нет голосов)

Загрузка ...

Leprechaun Software Developer

Профиль
Группа: Модератор
Сообщений: 15718
Регистрация: 24.3.2004
Где: Dublin

Репутация: 1
Всего: 538

Модератор: перемещено из Java

--------------------

Disclaimer: this post contains explicit depictions of personal opinion. So, if it sounds sarcastic, don't take it seriously. If it sounds dangerous, do not try this at home or at all. And if it offends you, just don't read it.

Jax

Дата 27.1.2006, 15:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 7.2.2005

Репутация: нет
Всего: нет

Скажите хотя бы как сделать фиксированный размер окошка или в крайнем случае сделать ее слева от мышки, а не справа, но опять же - фиксированно.

Ciber SLasH

Дата 27.1.2006, 15:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Попробуй:

Код


<body style='overflow: hidden'>

Jax

Дата 27.1.2006, 17:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 7.2.2005

Репутация: нет
Всего: нет

Нет, не то.
Разве нельзя сделать фиксированный размер окошка в пикселях? %)

Innuendo

Дата 27.1.2006, 19:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

сделай
в диве напиши style="width:50px; height: 100px"

--------------------

Gravip

Дата 27.1.2006, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 17.9.2005

Репутация: нет
Всего: нет

Jax

Можешь дать пример , как подключить этот скрипт к элементу в html smile

Ciber SLasH

Дата 27.1.2006, 21:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(Gravip @ 27.1.2006, 20:02

)

как подключить этот скрипт к элементу в html

Я тоже честно говоря не въехал как его прикрутить. Соответственно и ответов нет, т.к. нет примера использования...

Gravip

Дата 27.1.2006, 21:35 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 17.9.2005

Репутация: нет
Всего: нет

Я немного понял smile

Но наблюдаю глюк у FF, его отладчик ругается на вычисление top и left smile

может что ещё надо ?

Код


<html>
<script type="text/javascript" src="ToolTip.js"></script>
<body onload="initToolTips('SPAN','IMG')">
<span tooltip="Текст тултипа">Текст</span>
</body> </html>

Код


.tool_tip {
position: absolute;
visibility: hidden;
/* styles */
background-color: #f7f6f6;
font-family: verdana;
color: #444444;
font-size: 10px;
border: 1px solid #97A2B0;
padding: 1px;
text-align: left;
}

Это сообщение отредактировал(а) Gravip - 27.1.2006, 22:14

Innuendo

Дата 27.1.2006, 22:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

Цитата

Можешь дать пример , как подключить этот скрипт к элементу в html

Данный пример из FAQ этого форума. Скрипт Sardara... Я тестил.. просто вставляешь в ХТМЛ и всё smile

--------------------

Ciber SLasH

Дата 27.1.2006, 23:42 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Вот что-то типа этого:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
ToolTip.offsetX=20; //смещения подсказки от курсора
ToolTip.offsetY=10; //
function ToolTip(obj, text) {
  if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
  //-- Разметка подсказки ---
  var tip=document.createElement("DIV");
  tip.className="tool_tip";
  tip.innerHTML=text;
  document.body.appendChild(tip);
  //-- события --
  obj.onmouseout=function (ev) {
      tip.style.visibility="hidden";
  };
  obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
      tip.style.visibility="visible";
      if(window.event) ev=window.event;
      if ((ev.clientX + tip.clientWidth + ToolTip.offsetX + document.body.scrollLeft) > document.body.clientWidth) {
        tip.style.left = ev.clientX - (tip.clientWidth - (document.body.clientWidth - ev.clientX)) + document.body.scrollLeft;
      } else {
        tip.style.left=ev.clientX + document.documentElement.scrollLeft + ToolTip.offsetX;
      }
      if ((ev.clientY + tip.clientHeight + ToolTip.offsetY + document.documentElement.scrollTop) > document.documentElement.clientHeight) {
        tip.style.top = ev.clientY - (tip.clientHeight - (document.documentElement.clientHeight - ev.clientY)) + document.documentElement.scrollTop - 5;
      } else {
          tip.style.top=ev.y + document.documentElement.scrollTop + ToolTip.offsetY;
      }
  };
}
//переберем заданные элементы, дадим подказку тем у кого есть аттрибут tooltip
//В аргументах передаем имена рассматриваемых тегов, * все теги
function initToolTips() {
//   return;
    var tags, tooltext;
    for(var i=0; i<arguments.length; i++) {
       tags=document.body.getElementsByTagName(arguments[i]);
       for(var j=0; j<tags.length; j++)
            if((tooltext=tags[j].getAttribute("tooltip"))) ToolTip(tags[j], tooltext);
   }
}
</script>
<style type='text/css'>
.tool_tip {
position: absolute;
visibility: hidden;
/* styles */
background-color: #f7f6f6;
font-family: verdana;
color: #444444;
font-size: 10px;
border: 1px solid #97A2B0;
padding: 1px;
text-align: left;
}
</style>
</head>

<body onload="initToolTips('SPAN','IMG')">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<pre>    <span tooltip="Текст тултипа">Текст</span></pre>
</body>
</html>

Короче тебе нужно "тултип" отодвигать от краёв экрана (если он вылазит за него) на величину b от правого края и на величину d от нижнего края, если он вылазит за края. Для лучшейго понимания смотри рисунок:
user posted image

Расчитывается примерно так, но в разных браузерах clientWidth/clientHeight взаимоисключаемы с offsetWidth/offsetHeight, т.ч. с кроссбраузерностью будут проблемы.
b = tip.clientWidth - (document.body.clientWidth - ev.clientX);
d = tip.clientHeight - (document.documentElement.clientHeight - ev.clientY)

ЗЫ: но в общем Innuendo прав — бери скрипт Sardar-a.

Это сообщение отредактировал(а) Ciber SLasH - 27.1.2006, 23:47

Jax

Дата 28.1.2006, 12:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 7.2.2005

Репутация: нет
Всего: нет

Цитата(Ciber SLasH @ 27.1.2006, 23:42

)

ЗЫ: но в общем Innuendo прав — бери скрипт Sardar-a.

Ты это имеешь ввиду: http://vingrad.ru/JAVASCRIPT-FAQ-002034 ?

Ciber SLasH

Дата 28.1.2006, 14:26 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(Jax @ 28.1.2006, 12:19

)

Ты это имеешь ввиду: http://vingrad.ru/JAVASCRIPT-FAQ-002034 ?

Нет, я имею ввиду: http://forum.vingrad.ru/index.php?showtopic=53318

Innuendo

Дата 28.1.2006, 18:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

Ciber SLasH
так у него именно этот скрипт и есть smile

--------------------

Ciber SLasH

Дата 29.1.2006, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(Innuendo @ 28.1.2006, 18:07

)

так у него именно этот скрипт и есть smile

Точно, а я и не заметил. smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »