Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Наши скрипты > Всплывающие подсказки(tooltip)

Автор: Sardar 25.5.2005, 18:38

Преимущество этих подсказок над стандартными аттрибутом title в том, что эти подсказки содержат полноценный HTML, т.е. картинки и т.п. Внешний вид тоже задаёте сами smile

Начиналось всё здесь: http://forum.vingrad.ru/index.php?showtopic=32471

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.tool_tip {
 position: absolute;
 visibility: hidden;
 /* styles */
 background-color: #a98df5;
}
</style>
<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;
      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);
   }
}
//-->
</script>
</head>
<body onload="initToolTips('SPAN','IMG')">
  <span tooltip="<b>Подсказка =)</b>">Test</span>
</body>
</html>

Автор: Opik 29.8.2005, 10:57

3 Баги:
1) на объектов, кт-ые юзают onmouseout теряется вызов функции при событии.
2) при инициализации тултипа снизу документа пояляется "лишняя" область.
3) при тултипе установленном на объекте, близлежащему к границе документа(у правого/ нижнего скроллинга) объект выходит за рамки и создает неудобства, вместо того, что бы показываться в другую сторону.

Автор: Wowa 30.8.2005, 00:28

Может ли быть такое, что текст в несколько предложения обрезается?

Автор: Aliance 30.8.2005, 00:42

В Opera? Там проблемы с отрисовкой...
Хотя может быть и не в ней проблема, т.к. это же обычный div.
Поидеи, все может быть smile

Автор: Wowa 30.8.2005, 00:45

IE 6

Aliance вот ссылка: http://exrus.de/ru/search/search.php?search_firms=neue

Вот в этой строке: 003876 Neue Zeiten Edingen-Neckarhausen e.V. (Вес: 1)

Заканчивается на "Вместо знаний".

Автор: Sardar 30.8.2005, 00:46

Цитата(Wowa @ 29.8.2005, 23:28)

Может ли быть такое, что текст в несколько предложения обрезается?

Нет, если только не глюк браузера. Это очень простой код, он просто создаёт слой, куда кидает любой контент и показывает над элементом.

Цитата(Opik @ 29.8.2005, 09:57)

3 Баги:

ОК, доработаю.
Добавлено @ 00:48

Цитата(Wowa @ 29.8.2005, 23:45)

Заканчивается на "Вместо знаний".

Если глянешь в отрендеренный код, то увидишь такое:

Вместо знаний "про язык,

кавычка закрылась, всё остальное браузер игнорирует.

Автор: Wowa 30.8.2005, 01:04

Цитата(Sardar @ 29.8.2005, 23:46)

кавычка закрылась, всё остальное браузер игнорирует.

Аа, спасибо.

Автор: butionok 13.9.2005, 14:22

Sardar, а почему document.getElementById('tip').clientWidth не даёт ширину подсказки?

Автор: butionok 13.9.2005, 19:42

Цитата(Opik @ 29.8.2005, 10:57)

2) при инициализации тултипа снизу документа пояляется "лишняя" область.
3) при тултипе установленном на объекте, близлежащему к границе документа(у правого/ нижнего скроллинга) объект выходит за рамки и создает неудобства, вместо того, что бы показываться в другую сторону.

У меня "лишняя" область наблюдалась (тестировал на IE, Netscape 7.2,8.0, FireFox 1.0.6, Opera 8.02) только тогда, когда я прикреплял tip не к body, а к какому-нибудь слою.

Что касается выхода за рамки, то это решается небольшой модификацией

Код


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(tip.offsetWidth+ev.clientX+10>document.body.clientWidth) //если подсказка выходит за видимую 
        ToolTip.offsetX=-tip.offsetWidth; //облать, то поворачиваем её
else
        ToolTip.offsetX=20;
if(tip.offsetHeight+ev.clientY+15>document.body.clientHeight)// тоже самое, но по вертикали
       ToolTip.offsetY=-tip.offsetHeight;
else
      ToolTip.offsetY=10;

      tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
      tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
  };
}

Автор: Sardar 13.9.2005, 21:48

Цитата(butionok @ 13.9.2005, 13:22)

Sardar, а почему document.getElementById('tip').clientWidth не даёт ширину подсказки?

Потому что нет такого свойства. Обращайся к справочнику всегда: http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html
и MSDN.

Автор: sergejzr 14.10.2005, 23:31

узнать ширину/высоту подсказки по свойствам scrollWidth, scrollHeight

Автор: Sardar 14.10.2005, 23:58

Млин, обещал же новые подсказки, давно уже готово (для себя и для Opik'а делал), доки только нет, вернее времени нет дописать smile

Первые пара строк: http://sardar.vingrad.ru/projects/ToolTip/index.htm

Глядим в код, врубаемся. Что не ясно спрашиваем. Кратко:

Подсказки могут иметь любую разметку
Могут создаваться заранее - удобно если подсказка содержит в себе целое меню
Могут создаваться по шаблону, удобно для однотипных подсказок, например в галерее в подсказку можно поместить краткую инфу и ссылку далее для каждой картинки.
могут появляться плавно (прозрачно)
гибко настраиваються через аттрибут tooltip-set, синтаксис схожий с CSS

Без доки простой человек кроме простой подсказки мало что сделает, а это лишнее ведь есть стандартный title. Шаблонные подсказки показывают всё удобство.

Звиняюсь, допишу мануал, выложу smile

Автор: Aliance 3.11.2005, 22:31

Хм...у меня не работает, хотя и ошибок не выдает :'-(

Автор: Sardar 4.11.2005, 00:52

Подсказки там не сразу открываються, а через время, по дефолту 2 секунды, хотя можешь в аттрибуте tooltip-set="delay-on:<миллисекунды>;" задать задержку smile

Автор: Aliance 4.11.2005, 01:11

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.tool_tip {
 position: absolute;
 visibility: hidden;
 /* styles */
 background-color: #a98df5;
}
</style>
<script type="text/javascript">
<!--
// +----------------------------------------------------------------------+
// | ToolTip - customizable tooltips library                              |
// +----------------------------------------------------------------------+
// | Copyright (c) 2005-2006 Sardar Yumatov                               |
// +----------------------------------------------------------------------+
// | This library is free software; you can redistribute it and/or modify |
// | it under the terms of the GNU Lesser General Public License as       |
// | published by the Free Software Foundation; either version 2.1 of the |
// | License, or (at your option) any later version.                      |
// |                                                                      |
// | This library is distributed in the hope that it will be useful, but  |
// | WITHOUT ANY WARRANTY; without even the implied warranty of           |
// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the         |
// | GNU Lesser General Public License for more details.                  |
// |                                                                      |
// | This library is subject to version 2.1 of the LGPL license,          |
// | that is bundled with this package in the file LICENSE, and is        |
// | available at through the world-wide-web at                           |
// | http://www.gnu.org/copyleft/lesser.txt                               |
// | If you did not receive a copy of the LGPL license and are unable to  |
// | obtain it through the world-wide-web, please write to the            |
// | Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,  |
// | MA 02111-1307 USA                                                    |
// +----------------------------------------------------------------------+
// | Author: Sardar Yumatov<ja.doma@gmail.com>                            |
// +----------------------------------------------------------------------+

/**
* Подсказки в (X)HTML документах.
* Этот код используеться для создания легко настраиваемых подсказок к
* (X)HTML элементам. Подсказка может иметь любое содержимое, от простого
* текста, до шаблона с HTML разметкой.
*
* Автор выражает благодарность форуму:
*   http://forum.vingrad.ru/index.php
* без которого не появилась бы (ну может позже =) ) идея написать этот код.
*
* @license LGPL2.1 http://opensource.org/licenses/lgpl-license.php
* @copyright Copyright (c) 2005-2006 Sardar Yumatov
* @author Sardar Yumatov<ja.doma@gmail.com>
* @version 2.0
*/

//=================- Generic -=================
/**
* Отсечение пробельных символов в начале и конце строк
*/
if(!String.prototype.trim) String.prototype.trim=function() {
  var r=/^\s*((?:.|\n)+?)\s*$/.exec(this);
  return r? r[1]: this.toString();
}
/**
* Простой поиск в массиве
*/
if(!Array.prototype.findValue) Array.prototype.inValues=function(value, def) { //simple search
   for(var i=0; i<this.length; i++) if(this[i]==value) return value;
   return def;
}
/**
* Простая функция для приведения строки к числу с дефолтовым значением и границами
*/
function num(str, def, minVal, maxVal, integ){
  var r=integ? parseInt(str): parseFloat(str);
  r=isNaN(r)? Number(def): r;
  r=isNaN(r)? 0: r;
  if(typeof(minVal)=="number") r=Math.max(minVal, r);
  if(typeof(maxVal)=="number") r=Math.min(maxVal, r);
  return r;
}

/**
* Достать прокрутку страницы.
* Thanks to: www.quirksmode.org
*/
function getPageScroll() {
  var x,y;
  if (self.pageYOffset) {// all except Explorer
    x = self.pageXOffset;
    y = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) {// Explorer 6 Strict
    x = document.documentElement.scrollLeft;
    y = document.documentElement.scrollTop;
  } else if (document.body) {// all other Explorers
    x = document.body.scrollLeft;
    y = document.body.scrollTop;
  }
  return {x: x, y: y};
}
/**
* Достать размеры окна
* Thanks to: www.quirksmode.org
*/
function getFrameSize() {
  var x,y;
  if (self.innerHeight) {// all except Explorer
    x = self.innerWidth;
    y = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {// Explorer 6 Strict Mode
    x = document.documentElement.clientWidth;
    y = document.documentElement.clientHeight;
  } else if (document.body) {// other Explorers
    x = document.body.clientWidth;
    y = document.body.clientHeight;
  }
  return {width: x, height: y};
}

//====================- Tool Tip -===========================
/**
* Пустая функция служащая пространством имён для переменных ToolTip'а.
*/
function ToolTip() { alert("ToolTip version 2.0"); }

/**
* Отладочная функция. Вызываеться при ошибках.
* @param string msg текст ошибки
*/
ToolTip.debug=function(msg) {if(this.debugEnable) alert(msg); return null;};

/**
* Задержка между кадрами при анимациях скрытия/раскрытия в миллисекундах.
* не ставь мало, у тебя не такая крутая машина ;-)
* @var integer
*/
ToolTip.blendFrameDelay=10;

/**
* Глобальная переменная/флаг, резрешающая отладочные сообщения.
* @var boolean
*/
ToolTip.debugEnable=true;

/**
* Дефолтовые настройки для всех подсказок
*/
ToolTip.defaultSets={
  type: "simple", //tooltip type: simple, extern, extern-template
  target: "", //element ID
  appearance: "blend", //tooltip apearance: simple, blend
  floating: "accessible", //cursor following: static, accessible, follow
//  fieldWidth: 0.9, //active field width on object in procenten 0-1
//  fieldHeight: 0.9, //active field height
  width: "", //tooltip CSS width
  height: "", //CSS height
  offsetX: 15, //horizontal tooltip offset from cursor in px
  offsetY: 15, //vertical tooltip offset from cursor in px
  delayOn: 1000, //show delay in ms
  delayOff: 100, //hidde delay in ms
  animationLength: 200 //blending animation length in ms
}

/**
* Инициализировать подсказку на элементе.
* Элемент должен иметь аттрибут tooltip и не не обязательный tooltip-set.
* Если элемент их не имеет, то он тихо игнорируеться, что удобно в енумерациях
* "без разбора".
*
* @param HTMLElement obj элемент на котором инициализируем подсказку
*/
function applyToolTip(obj) {
   if(!obj||obj.nodeType!=1) return ToolTip.debug("Illigal argument exception, given element is not a HTMLElement!");
   var t, sets;
   if(((t=obj.getAttribute('tooltip'))==null) & ((sets=obj.getAttribute('tooltip-set'))==null)) return; //no tooltip info
   sets=parseToolTipSettings(sets);
   switch(sets.type) {
      case "simple": if(t) new SimpleToolTip(obj, sets, t); break;
      case "extern": new ExternToolTip(obj, sets); break;
      case "extern-template": new ExternTemplateToolTip(obj, sets); break;
      default: return ToolTip.debug("Uknown tooltip type '"+sets.type+"'!");
   }
}

/**
* Распарсить строку с настройками tooltip-set.
* Возвращаеться обьект с полями соотвествующими настройкам. Синтаксис настроек
* похож на CSS.
* @param string str строка с настройками в синтаксисе CSS
* @return Map обьект - массив множество настроек
*/
function parseToolTipSettings(str) {
  if(str==null) return new ToolTipSettings();
  var ioff=0, ret=new ToolTipSettings();
  str.replace(/\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:([^;]+))|(;))\s*/g, function(full, dir, val, delim, offs) {
     if(ToolTip.debugEnable&&ioff!=offs) alert("Illigal syntax near: "+offs+"\n"+str+"\n\nTrying parse rest of string...");
     else ioff=offs+full.length;
     if(!delim) ret.set(dir.toLowerCase().trim(), val);
     return full;
  });
  return ret;
}
/**
* Контейнер опций.
* Достаёт и устанавливает опции по внешнему имени. После опции доступны как по
* внешнему имени через get, так и по внутреннему имени(JS CSS) обращаясь
* напрямую к полям обьекта.
*/
function ToolTipSettings() {}
ToolTipSettings.prototype=ToolTip.defaultSets;
/**
* Установить опцию по имени.
* Типы значений зашиты в код.
* @param string name внешнее имя опции
* @param string value значение опции
*/
ToolTipSettings.prototype.set=function(name, value) {
     switch(name.toLowerCase().trim()) {
       case "type": this.type=['simple', 'extern', 'extern-template'].inValues(value.trim(), this.type); break;
       case "target": this.target=value.trim(); break;
       case "floating": this.floating=['static', 'accessible', 'follow'].inValues(value.trim(), this.floating); break;
       case "appearance": this.appearance=['simple', 'blend'].inValues(value.trim(), this.appearance); break;
//       case "field-width": this.fieldWidth=num(value.trim(), this.fieldWidth, 0, 1); break;
//       case "field-height": this.fieldHeight=num(value.trim(), this.fieldHeight, 0, 1); break;
       case "width": this.width=value.trim(); break;
       case "height": this.height=value.trim(); break;
       case "offset-x": this.offsetX=num(value.trim(), this.offsetX, null, null, true); break;
       case "offset-y": this.offsetY=num(value.trim(), this.offsetY, null, null, true); break;
       case "delay-on": this.delayOn=num(value.trim(), this.delayOn, 0); break;
       case "delay-off": this.delayOff=num(value.trim(), this.delayOff, 0); break;
       case "animation-length": this.animationLength=num(value.trim(), this.animationLength, 0); break;
       default: //ignore unknown settings
     }
}
/**
* Достать опцию по внешнему(со знаками тире) имени.
* @param string name внешнее имя опции
* @return mixed значение опции
*/
ToolTipSettings.prototype.get=function(name) {
   name=name.trim().replace(/-([a-zA-Z])/g, function(full, let) {return let.toUpperCase();});
   if(typeof(this[name])!="function") return this[name];
   else return null;
}

/**
* Приаттачить готовую подксазку к обьекту.
* Инициализируються события и эффекты. Подгоняються размеры из настроек.
* @param HTMLElement obj
* @param HTMLElement tooltip
* @param Map sets
*/
function makeToolTipBox(obj, tooltip, sets) {
  if(tooltip.className.split(/\s+/).inValues('tooltip')==null) tooltip.className+=" tooltip";
  if(sets.appearance=='blend'&&tooltip.className.split(/\s+/).inValues('blend_tooltip')==null) tooltip.className+=" blend_tooltip";

  var offtimer=null;
  var ontimer=null;
  var ox=-1, oy=-1;
  var visible=false;
  
  if(sets.width.trim()) tooltip.style.width=sets.width;
  if(sets.height.trim()) tooltip.style.height=sets.height;
  /**
  * Открытие и закрытие
  */
  function show() {
    if(offtimer) {
      window.clearTimeout(offtimer);
      offtimer=null;
    }
    if(!visible) {
      if(sets.appearance=='blend') { //we must know the dimensions
         tooltip.style.visibility="visible";
         tooltip.style.display="block";
      }
      ontimer=window.setTimeout(function() {tooltipToggleVsiual(tooltip, true, sets);}, sets.delayOn);
      visible=true;
    }
  }
  /**
  * Передвижение подсказки
  */
  function move(ev) {
     if(window.event) ev=window.event;
     show();
     
     var cordx, cordy, hor, vert;
     var sc=getPageScroll();
     var sz=getFrameSize();

     //нужно что бы подсказка не выбегала за экран, разворачиваем
     if((ev.clientY+tooltip.offsetHeight+sets.offsetY)>sz.height) {
       cordy=ev.clientY - tooltip.offsetHeight - sets.offsetY + sc.y;
       vert=true;
     } else {
       cordy=ev.clientY + sc.y + sets.offsetY;
       vert=false;
     }
     
     if((ev.clientX+tooltip.offsetWidth+sets.offsetX)>sz.width) {
       cordx=ev.clientX - tooltip.offsetWidth - sets.offsetX + sc.x;
       hor=true;
     } else {
       cordx=ev.clientX + sc.x + sets.offsetX;
       hor=false;
     }
     
     //если на посдсказку можно набежать мышью, то бежим только к границам экрана, в центр стоим
     if(sets.floating=='accessible') {
       if(oy>=0&&((vert&&oy>cordy)||(!vert&&oy<cordy))) cordy=oy;
       if(ox>=0&&((hor&&ox>cordx)||(!hor&&ox<cordx))) cordx=ox;
       ox=cordx; oy=cordy;
     }
     tooltip.style.left=cordx+'px';
     tooltip.style.top=cordy+'px';
  };
  
  //собираем события. DOM 2 Event не юзаем, жаль ИЕ не поддерживает
  if(obj.onmouseout) obj.old_onmouseout=obj.onmouseout;
  obj.onmouseout=tooltip.onmouseout=function(ev) {
    offtimer=window.setTimeout(function(){tooltipToggleVsiual(tooltip, false, sets); visible=false;}, sets.delayOff);
    if(ontimer) {
       window.clearTimeout(ontimer);
       ontimer=null;
    }
    ox=oy=-1;
    if(obj.old_onmouseout) obj.old_onmouseout(ev); 
  }
  if(obj.onmousemove) obj.old_onmousemove=obj.onmousemove;
  if(sets.floating=="static") {
    if(obj.onmouseover) obj.old_onmouseover=obj.onmouseover;
    obj.onmouseover=function(ev){move(ev); if(obj.old_onmouseover) obj.old_onmouseover(ev);}
    obj.onmousemove=function(ev){show(ev); if(obj.old_onmousemove) obj.old_onmousemove(ev);}
  } else obj.onmousemove=function(ev){move(ev); if(obj.old_onmousemove) obj.old_onmousemove(ev);}
  if(tooltip.onmousemove) tooltip.old_onmousemove=tooltip.onmousemove;
  tooltip.onmousemove=function(ev){show(ev); if(tooltip.old_onmousemove) tooltip.old_onmousemove(ev);}
}


/**
* Скрыть/показать подсказку(HTMLElement).
*/
function tooltipToggleVsiual(tooltip, show, sets) {
  if(sets.appearance=="blend") {
    if(tooltip.tmr) window.clearInterval(tooltip.tmr);
    var res=(ToolTip.blendFrameDelay>0? ToolTip.blendFrameDelay: 50);
    var step=(show? 1: -1)*(1/(sets.animationLength>0? sets.animationLength: 1000))*res; //шаг в процентах от заданного времени

    var opacity=(typeof(tooltip.style.KhtmlOpacity)!="undefined")? parseFloat(tooltip.style.KhtmlOpacity): //konquerror и его семейство
              (typeof(tooltip.style.MozOpacity)!="undefined")? parseFloat(tooltip.style.MozOpacity): //мозилла и прочие Gecko. кстати, долбанная мозилла не покажет какое сейчас значение, если его не меняли...
              (typeof(tooltip.filters)!="undefined")? tooltip.filters.Alpha.opacity/100: //ИЕ вариант
              (typeof(tooltip.style.opacity)!="undefined")? parseFloat(tooltip.style.opacity): //не стоит доверять, может не undefined для понту, а всё равно не поддерживаеться CSS3
              null; //нет прозрачности как таковой
    
    tooltip.style.visibility="visible";
    tooltip.style.display="block";          
    if(opacity==null) {
       tooltip.style.display=show? "block": "none";
       return;
    }
    opacity=isNaN(opacity)? (show? 0: 1) : opacity; //тест на вшивость
    opacity=Math.min(1, Math.max(0, opacity));
    //и так здесь мозилла(возможно konquerror) обложалась, мы не можем узнать значение opacity если оно не менялось
    //потому в первый раз возьмём как будто мы находимся на границе, либо 0, либо 1
    
    tooltip.tmr=window.setInterval(function() {
      if((opacity+=step)>=1||opacity<=0) {
        window.clearInterval(tooltip.tmr);
        tooltip.tmr=null;
        if(opacity<=0) tooltip.style.display="none";
      }
      if(tooltip.filters) tooltip.filters.Alpha.opacity=Math.round(opacity*100);
      tooltip.style.KhtmlOpacity=tooltip.style.MozOpacity=tooltip.style.opacity=opacity.toFixed(3);
    }, ToolTip.blendFrameDelay);
  } else {
    tooltip.style.display=show? "block": "none";
    tooltip.style.visibility=show? "visible": "hidden";
  }
}

//================- Tooltip implementations -====================
/**
* Обьект подсказки собирающий простую подсказку в виде маленького окошка.
* Содержимое подсказки указываеться в аттрибуте tooltip. Содержимым являеться
* валидный HTML, который помещаеться в слой на абсолютной позиции.
* Для слоя должен быть определён правильный CSS класс tooltip_simple
* @param HTMLElement obj
* @param Map sets
* @param string content текст/HTML подсказки
*/
function SimpleToolTip(obj, sets, content) {
  var tip=document.createElement("div");
  tip.className="tooltip_simple tooltip"; 
  tip.innerHTML=content;
  document.body.appendChild(tip);
  
  this.visual=tip;
  this.target=obj;
  obj.tooltip=this;
  makeToolTipBox(obj, tip, sets);  
}

/**
* Обьект подсказки с заранее созданной подсказкой.
* Для работы необходимо существование параметра target, в котором
* задан идентификатор подсказки.
* @param HTMLElement obj
* @param Map sets
*/
function ExternToolTip(obj, sets) {
  if(!sets.target) return ToolTip.debug("Target must be specified for tooltip type extern and extern-template!");
  var tip=document.getElementById(sets.target);
  if(!tip) return ToolTip.debug("No extern tooltip with ID '"+sets.target+"' found!");
  this.visual=tip;
  this.target=obj;
  makeToolTipBox(obj, tip, sets);
}

/**
* Шаблоннная подсказка.
* В шаблоне распознаём теги <% имя %>, которые заменяем на значения.
* Просто и эффективно =)
*/
function ExternTemplateToolTip(obj, sets) {
  function getComment(o, n) {
    if(!n||n<=0) n=1; 
    for(var i=0; i<o.childNodes.length; i++) {
      if((o.childNodes[i].nodeType==8)&&(--n<=0)) return o.childNodes[i].nodeValue;
    }
    return null;
  }
  if(!sets.target) return ToolTip.debug("Target must be specified for tooltip type extern and extern-template!");
  var temp=document.getElementById(sets.target), def, data;
  if(!temp) return ToolTip.debug("No extern tooltip with ID '"+sets.target+"' found!");
  templ=getComment(temp, 1);
  if(!templ) return ToolTip.debug("Extern template with ID '"+sets.target+"' has no template body!");
  def=getComment(temp, 2);
  data=getComment(obj, 1);
  //рапарсим значения
  def=parseToolTipTemplateValues(def? def: "");
  data=parseToolTipTemplateValues(data? data: "");
  //вставим в шаблон, надеемся что вёрстка валидна =)
  var html=templ.replace(/<%\s*([a-zA-Z0-9\-_\.]+)\s*%>/g, function(full, tag) {
     if(typeof(data["~"+tag])!='undefined') return data['~'+tag];
     else if(typeof(def["~"+tag])!='undefined') return def['~'+tag];
     else return "";
  });
  html=html.replace(/<\\%/g, '&lt;%').replace(/%\\>/g, '%&gt;');
  
  var tip=document.createElement("div");
  tip.className="tooltip"; 
  tip.innerHTML=html;
  document.body.appendChild(tip);
  
  this.visual=tip;
  this.target=obj;
  obj.tooltip=this;
  makeToolTipBox(obj, tip, sets);
}
/**
* Распарсим значения, синтаксис как и у опций - name: value;
* @param string str
*/
function parseToolTipTemplateValues(str) {
  var ioff=0;
  var data={};
  str.replace(/\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:((?:[^;]+)|(?:\\.)))|(;))\s*/g, function(full, dir, val, delim, offs) {
     if(ToolTip.debugEnable&&ioff!=offs) alert("Illigal syntax in template data near: "+offs+"\n"+str+"\n\nTrying parse rest of string...");
     else ioff=offs+full.length;
     if(!delim) data["~"+dir.toLowerCase().trim()]=val.trim();
     return full;
  });
  return data;
}

/**
* Инициализировать подсказку на всех элементах заданного типа во всём документе.
* В параметрах передаються имена тегов, которые необходимо пересмотреть.
* Следите за регистром если пишете в XHTML.
* Пример: initToolTip("span", "div", "img");
*
* @param ... не ограниченное число параметров, каждый из которых это имя тега
*/
function initToolTip() {
  var tags;
  for(var i=0; i<arguments.length; i++) {
     tags=document.body.getElementsByTagName(arguments[i]);
     for(var j=0; j<tags.length; j++) applyToolTip(tags[j]);
   }
}
//-->
</script>
</head>
<body onload="initToolTips('span','img')">
  <span tooltip="Подсказка =)">Test</span>
</body>
</html>

Ничего =(

Автор: Sardar 4.11.2005, 13:39

Если что то не работает, значит есть ошибка smile

Смотрим в body.onload - функция называеться initToolTips, s там лишняя. Далее что бы подсказки работали, нужно подключить стиль tooltip.css, отдельный .tool_tip не существует.

Знаю что нужно написать ман как это использовать и повытаскивать оставшиеся баги(в основном monkeyproof проверки), но млин катастрофически не хватает времени smile

Автор: Aliance 4.11.2005, 14:14

Все спасибо, ошибка в том, что я брал разметку с первой версии, а скрипт со второй smile

Поэтому и лишняя s =)
Огромное спасибо )

Автор: sulla 21.3.2006, 20:14

используя первый вариант подсказок столкнулся стем что нельзя засунуть

Код

initToolTips('SPAN','IMG');

в body документа (оформление и функционал разделены и вызываются чёрте как smile

)) )

для того чтобы работали корректно подсказки помогло вот такая вставка в функцию:

Код


<script FOR=window EVENT=onload TYPE="text/javascript">
<!--запуск сприпта после загрузки!
    initToolTips('SPAN','IMG');
-->    
</SCRIPT>

хык, можете ещё кому пригодиться.

Автор: Гриша 22.3.2006, 02:21

Нашел файл с подсказкой по этой ссылке: http://sardar.vingrad.ru/projects/ToolTip/index.htm
Ну все хорошо, просто мечта, самое главное то что еще и текст из подсказки можно скопировать.
Нот вот проблема: Если к пример в подсказку вставить текст длинной 255 символв, т.е. соответсвенно в длину на экране она не уместиться, и втаком случае подсказка не сжимается, а выходит за границы окна слева, а так как изображение у меня слева, то от подсказки остаестя 1/5.
Не подскажите ли решение этой проблемы.

Автор: sulla 22.3.2006, 13:21

собственно подобную пролему решить просто:

в подсказку не просто текст а:
1. div - с заданными высотой и шириной
2. таблицу также с заданными высотой и шириной

только вот есть проблемка если много подсказок ан странице
в конце старницы добавляется кусок пустого протсранства... smile

пропадает толькоесли открыть все подсказки smile

Автор: Гриша 22.3.2006, 17:36

sulla, спасибо за ответ.

Текст в посдказке может быть как из 5 символов так и из 255.

К примеру если я установлю максимальную ширину подстроенную под текст из 255 символов, то тогда при тексте из 5 символов, подсказка, будет больше длинны этого текста.

ВОт все в подсказке хорошо, ну только еслибы за левую границу так не вылезала. Я в javascript 0. Поэтому смотря код мне ничего не ясно, если вам самим удобно использовать такую подсказку и вы решите устронить эту проблему, может быть вы напишите здесь пример решения этой проблемы.

Вот никак не клеится у меня на сайте (еще не закончил делать) без таких подсказок.

Автор: Ciber SLasH 23.3.2006, 21:59

Гриша, а чем тебя не устраивает tooltip, который в аттаче этого поста: http://forum.vingrad.ru/index.php?showtopic=84606&view=findpost&p=660816
smile

Автор: Гриша 24.3.2006, 01:28

Ciber SLasH, вы мне когда в топики в одном написали про этот вариант, так он у меня щас лежит, как запасной. Я вот ща еще раз псомтрел, как всплывающая подсказка в нем все хорошо. Только есть к примеру текст подсказки будет из 10 символов, то сам размер подсказки будет больше. Когд там конечно мудреный, я из самой страницы код скачал в два объелиненных файла с дополнительными кодами.
Вы мне очень хорошо помогли с тем что дали мне ссылку на этот код и даже пояснили как извлекать данные из alt и title.

Я когда увидел tooltip Sardar, там где из него можно брать текст, я просто очумел, я та обрадовался, и подсказка по длине текста выстраивается (ну я как понимаю это в с тсилях нет длинны), но вот когда текста много подсказака уходит в левую сторону за экран, вот это все испортило. Я и подумал, может быть мне подскажут как это исправить.
Я вот еще sulla как то недопонял, как сделать то что он мне написал.

Я добавил в стиль этой подсказки размер width:250px, ну почему-то вот за правый край она не съезжает, но реску перемещается за левый часть экрана, хотя могла бы уместиться по центру.
Да уж очень сложно все это.

Автор: Гриша 24.3.2006, 22:42

Подскажите пожалуйста, а как вот во всплывающей подсказке tooltip Saradar, с этой страницы: http://sardar.vingrad.ru/projects/ToolTip/index.htm
Сделать так, чтобы она была обычной плавающей подсказкой, т.е. что нужно подправить, чтобы текст в подсказке нельзя было выделять, я хочу посмотреть как она себя будет вести в таком случае.

Автор: Aliance 27.3.2006, 00:08

А комментарии он для кого писал?
В этой строчке устанавливается режим подсказки:

Код


floating: "accessible", //cursor following: static, accessible, follow

тебе нужно изменить его на:

Код


floating: "static", //cursor following: static, accessible, follow

Автор: Гриша 28.3.2006, 03:01

Aliance, спасибо за разъяснение.
Я попробовал изменить все эти настройки:

Код


type: "simple", //tooltip type: simple, extern, extern-template
target: "", //element ID
appearance: "blend", //tooltip apearance: simple, blend
floating: "accessible", //cursor following: static, accessible, follow

В них нельзя запретить выделение текста в подсказке.
Вот эта настройка: floating: "follow", дает выелять текст, но ездиет за мышкой во все стороны (чтобы выделить текст, нужно постораться), благодаря этому я увидел, что ведет подсказка себя также, т.е. при сужении окна, вылезает за левую часть экрана.

Автор: sulla 28.3.2006, 13:51

Гриша, а на чём программируете smile

для тог очтобы вставить таблицу или кучу текста поступил так:

Код


$info="<table border=1 width=117px>
    <tr><td>первая строка</td></tr>
    <tr><td><center>";
$info.="<img src='путьк картинке'>";
$info.="</center></td></tr>
    <tr><td>тертья строка</td></tr>
    <tr><td>четвёртая строка</td></tr>
    </table>";

<span tooltip=\"".$info."\"> вот над этим будет подсказка!</span>

проблему с добавлением внизу пустог оместа решил очень просто :
пр иинииализации для каждой подсказки указал top и left равные 10 )

Автор: Гриша 31.3.2006, 17:28

sulla, спасибо большое за разъяснения.
Программирую на PHP smile

. C javascript нелады, да и не очень я ему доверяю.
Ну я уже нашел другой вариант вместо отображения подсказок из которых можно копировать текст.

Автор: z-END 14.10.2006, 14:19

А есть какая-то возможность использовать данный скрипт так, чтобы документ оставался валидным?!
а то валидатор на http://validator.w3.org/check?uri=http%3A%2F%2Fsardar.vingrad.ru%2Fprojects%2FToolTip%2Findex.htm&charset=windows-1251&doctype=HTML+4.01+Strict ругается smile

Автор: Wowa 14.10.2006, 14:50

z-END, у тебя там только проблема с тегом span связанная с tooltip. Остальные ошибки с других мест идут.

А вместо тега span ты можешь любой другой тег использовать. В теге body указывается, какие теги должны быть обработаны.

Автор: z-END 14.10.2006, 15:17

Цитата(Wowa @ 14.10.2006, 15:50

)

у тебя там только проблема с тегом span связанная с tooltip.

я про нее и говорю, стоит включить подсказку в тело, то сайт становиться невалидным.
Вот код:

Код


<!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">
<title>Test</title>
</head>

<body>
    <a href="#" tooltip="sdsd">TOOLTIP</a>
    <div tooltip="sdsd">TOOLTIP</div>
</body>
</html>

Вот результат:

Цитата

Below are the results of attempting to parse this document with an SGML parser.
Error Line 10 column 21: there is no attribute "TOOLTIP".
<a href="#" tooltip="sdsd">TOOLTIP</a>

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

Error Line 11 column 14: there is no attribute "TOOLTIP".
<div tooltip="sdsd">TOOLTIP</div>

Автор: Wowa 14.10.2006, 15:43

А если такой заголовок пустить:

Код


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

Тогда должно быть валидно, ведь имхо в XHTML любые аттрибуты разрешены.

Автор: z-END 14.10.2006, 18:09

а меня какраз проблема HTML мучает smile

Автор: Rock 4.11.2006, 19:56

хотелось бы поподробнее о использовании шаблонов, если можно

Автор: Rock 4.11.2006, 21:32

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="./tooltip.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="./js/tooltip.js"></script>
</head>
<body onload="initToolTip('div');">
<div id="tip_template">
<!-- 
Значение 1: <% var1 %> <br>
Значение 2: <% var2 %>
-->
</div>
<div tooltip-set="type: extern-template; target: tip_template;" tooltip="">
    <!--var1: 444; var2: 1123-->[?]
</div>
</body>
</html>

Вот таким вот образом у меня получилось сделать это, вопрос вообщем так ли это задумывалось и правильно ли я сделал? ))
PS: спасибо за скрипт, очень пригодился.

Автор: Wowa 25.12.2006, 21:14

А как использовать переменные <% var1 %> в шаблоне?

Автор: Wowa 25.12.2006, 21:43

Цитата

Содержимым может быть HTML вёрстка , но все вхождения символов <, > и & должны быть замещены строками <, > и &.

Если я произвожу такую замену, то HTML не интерпретируется, а так и отображается. Быть может это зависит от типа документа?

у меня:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Автор: Sardar 25.12.2006, 23:59

Ого, радует что старые скрипты ещё используються smile

Цитата(Wowa @ 25.12.2006, 20:14

)

А как использовать переменные <% var1 %> в шаблоне?

Честно, делал "на коленке", потому всё покажется немного странным, но работать будет smile

Шаблоны нужны для больших подсказок, которые просто не могут влезть в tooltip аттрибут или генерить для каждого элемента вёрстку не эффективно. Только в шаблонах распознаются теги <% имя %>, заменяемое просто на значение соответствующее имени. Кодом проще:

Код

<!-- Нам нужно указать откуда брать шаблон через опцию 'target'. Дополнительно можно поставить другие опции -->
<div tooltip-set="target: tpl; type: extern-template;">
<!-- 
  test: cool!;
  some: vingrad;
-->
<!--
Первый комментарий должен содержать пары ключь=>значение, что и будут давать значения тегам в шаблоне
Кстати, вижу в регах баг! =)  рег будет брать значение до первого ";", но его можно заэкранировать "\;".
Квантификатор "+" не за той скобкой и теперь можно пользовать не более одной экранирующей последовательности =)
Исправь в 183 строке, рег: /\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:((?:[^;]+)|(?:\\.)))|(;))\s*/g
на: /\s*(?:(?:([a-zA-Z0-9_\-.]+)\s*\:((?:[^;]|(?:\\.))+))|(;))\s*/g
-->

Любой контент, что снабжаем подсказкой.
</div>

<!-- Собственно сам шаблон, связываем id с target ранее, первый коммент содержит шаблон -->
<div id="tpl">
<!-- <b><i><% test %></i> and <% some %> or <% cool %></b> -->
<!--
  cool: ну и тут некоторый текст;
-->
<!-- Второй комментарий содержит дефолтовые значения для тегов, на случай если они не определены в теге, что юзает тултип. -->
</div>

Вместо шаблонов можно пользоваться просто вёрсткой (type: extern), если <% теги не нужны %>. Принцип тот же, только div:tpl должен содержать вёрстку подсказки целиком, как есть (вне комментария).

Цитата(Wowa @ 25.12.2006, 20:43

)

Если я произвожу такую замену, то HTML не интерпретируется, а так и отображается.

Вероятней всего у тебя стоит фильтр на выводе, что все & в &'ы обращает. Только тогда ты можешь увидеть мнемоники как есть. Смысл мнемоник в том, что бы в аттрибуте tooltip можно было показать вёрстку. Значение аттрибута не может содержать < и >, вот и решаем. Если используется режим extern или extern-template, т.е. подсказка определена вне тега, то мнемоники конечно же не нужны smile

Автор: Wowa 26.12.2006, 00:32

Цитата(Sardar @ 25.12.2006, 21:59

)

Ого, радует что старые скрипты ещё используються smile

Да, я на vingrad.ru его поставил. Чтобы отображалась инфо о пользователе(при наводе мышкой на ник).

P.S. Спасибо за объяснение.

Автор: tolik777 21.1.2007, 17:23

Скажите. Может кто уже видел новую фичу от гугла с использованием AJAX:
http://translate.google.com/translate?hl=ru&sl=en&u=http://english.cxem.net/&sa=X&oi=translate&resnum=1&ct=result&prev=/search%3Fq%3Dsite:english.cxem.net%26hl%3Dru%26lr%3D

Попробуйте наведите на какое-нибудь слово. Всплывает очень красивое окошко с тенью, а в нем оригинал предложения на английском языке.
Может кто знает как рализовать такое (имею ввиду часть JavaScript а не аякс)

Автор: Sardar 21.1.2007, 17:46

Аякс там не используется, оригинальный и переведённый текст стоят рядом (в span контейнере, скрыт по display: none). При наведении мышой на текст, копия ноды помещается во временное baloon окошко и показывается. Собственно вся задача создать такое окошко, на JS только позиционируем и показываем.

Автор: GZep 21.1.2007, 21:51

Цитата(Sardar @ 25.12.2006, 23:59

)

Ого, радует что старые скрипты ещё используються

А что, есть что-то поновее? Я имею ввиду новая версия tooltip'a... smile

Автор: badGamer 22.1.2007, 08:21

Sardar, а как в tooltip встроить аякс? два дня бился smile

: и ничсего не понимаю....
Просто никогда не кодил на JS.... а тут такое дело.
Очень хочется чтобы в тексте странички было что-то вида:

Код

<a href="куда-то" tooltip ="15">

, где 15 это id записи в базе например.

Как сделать так, чтобы tooltip запросил инфу у скрипта-обработчика и вернул ответ (аякс тобишь smile

)?
Помогите плиз...

Автор: GZep 22.1.2007, 14:39

Цитата(badGamer @ 22.1.2007, 08:21

)

а как в tooltip встроить аякс?

Не очень хорошая идея по 2 причинам:

Будет медленно работать, ведь на выполнения запроса нужно время...
Эти всплывающие подсказки е должны быть большими, ибо они плавно появляются и все такое, короче расчитаны на небольшие подсказки, желательно только текст. Из этого следует, что аякс не требуется, можно и без аякса загрузить вместе со страницей все подсказки, не сильно съев трафик.

Вот так вот. smile

Автор: Sardar 22.1.2007, 15:50

GZep, поддерживаю, ложить в подсказку целую страницу незачем, следовательно всё необходимое можно отослать вместе со страницей. Тогда и подсказка будет действительно подсказкой, а не примером как разработчик умело владеет аяксом smile

Автор: badGamer 22.1.2007, 19:58

Цитата(GZep @ 22.1.2007, 14:39

)

Будет медленно работать, ведь на выполнения запроса нужно время...

Ну не знаю имхо выполнение запрос зймет очень мало времени. Другое дело скорость соединения.... но и это не проблема

Цитата(GZep @ 22.1.2007, 14:39

)

Эти всплывающие подсказки е должны быть большими, ибо они плавно появляются и все такое, короче расчитаны на небольшие подсказки, желательно только текст. Из этого следует, что аякс не требуется, можно и без аякса загрузить вместе со страницей все подсказки, не сильно съев трафик.

Ну а кто говорил про большие??? как напрмер (небольшая картинка + небольшое описание + пара сцылок)*150 итого получаецо 800-1000 байт * 150 = порядка 140 килобайт. Это ерунда согласен, но информация изменяется динамически, хоть и нечасто, но всеже изменяется... (делаю интерактивную карту tooltip используется для вывода и нформации о каждом городе)
Вот и хотелось бы брать инфу с сервера.

Если Вам нетрудно, подсобите пожалуйсто. smile

Автор: GZep 23.1.2007, 14:17

Цитата(badGamer @ 22.1.2007, 19:58

)

очень мало времени

Вы даже, наверное, не представляете себе какие бывают полудохлые хостинги.

Цитата(badGamer @ 22.1.2007, 19:58

)

но информация изменяется динамически

Да. Ну вот и подгружайте информацию при помощи аякса. Например, раньше вы ба подгрузили обычный блок div с содержанием, а теперь надо подгрузить этот блок, только в нем поставить атрибут tooltip и разработка уважаемого Sardar'a будет работать с этим догруженным блоком.

Автор: badGamer 24.1.2007, 11:03

Цитата(GZep @ 23.1.2007, 14:17

)

Вы даже, наверное, не представляете себе какие бывают полудохлые хостинги.

Зачем такими пользоватся? у меня хостингом все нормально smile

Цитата(GZep @ 23.1.2007, 14:17

)

Да. Ну вот и подгружайте информацию при помощи аякса. Например, раньше вы ба подгрузили обычный блок div с содержанием, а теперь надо подгрузить этот блок, только в нем поставить атрибут tooltip и разработка уважаемого Sardar'a будет работать с этим догруженным блоком.

В том-то все и дело, раньше вообще ничего не подгружалосль, описание состояло из 3-4 слов и все было html. А теперь описание стало больше и возникли трудности...

Если Вас это не затруднит киньте, пожалуйста, небольшой пример к вышесказанному... Я очень слабо знаком с JS.
Заранее благодарен smile

Автор: GZep 24.1.2007, 15:34

Цитата(badGamer @ 24.1.2007, 11:03

)

киньте, пожалуйста, небольшой пример

Ну, тут не примеры надо , а статьи. А именно статьи про AJAX:
http://ru.wikipedia.org/wiki/Ajax
http://www.ibm.com/developerworks/ru/library/wa-ajaxintro1/
http://www.xakep.ru//magazine/xs/067/052/1.asp
И в ФАК Винграда тоже стоит заглянуть...(кстати, обратите внимание на меню слева - в нем для подгрузки данных используется ajax)
http://vingrad.ru/JAVASCRIPT-ART-002998
Ну с этими статьями я думаю, что все понятно будет. smile

З.Ы. Что хочется добавить: на самом деле эту разработку Sardar'a не надо дорабатывать, а надо внедрить аякс в вашу разметку.

Автор: badGamer 24.1.2007, 16:57

Спасибо конечно за link`s. С AJAX все более-менее понятно. Я бы даже сказал более чем менее smile

Проблема в моей javascript безграмотности...
Как я понимаю нужно юзать вид external tooltip. В итоге каждая ссылка будет вида

Код


<a href="city/134.html" onmouseover="loadinfo('ID')" tooltip-set="type: simple; target: info;">

Сразу вопрос, а как loadinfo сообщить, что это ссылка на 134 город, как передать это значение?
Я правильно извратил идею?

Автор: GZep 25.1.2007, 12:42

badGamer, Вы хотите подгружать текст подсказки или блок, в котором есть атрибут tooltip с содержанием подсказки. Если 2-е, то это не так сложно, а вот с первым, боюсь вам сможет помочь только Sardar(потому что там придется сам объект ковырять).

Да, и откуда эта разметка?

Автор: badGamer 25.1.2007, 15:57

Мне показалось, что 1 проще намного, Так что видимо вопрос уважаемому Sardar:). итого получилось следующее:

Код


<link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">
<script type="text/javascript" language="JavaScript" src="tooltip.js"></script>
<script type="text/javascript" language="JavaScript" src="JsHttpRequest.js"></script>
<script type="text/javascript" language="JavaScript">
function L(value) {
    document.getElementById('desc').innerHTML= 'Подождите, идет загрузка...';
    var req = new JsHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            document.getElementById('desc').innerHTML = 
                '<b>MD5("'+req.responseJS.q+'")</b> = ' +
                '"' + req.responseJS.md5 + '"<br> ';
            document.getElementById('debug').innerHTML = req.responseText;
        }
    }
    req.caching = true;
    req.open(null, 'loader.php', true);
    req.send( { q: value } );
}
</script>
</head>
<body onload="initToolTip('area')">
<div class="tooltip_simple" style="visibility:hidden;display:none;" id="desc"></div>
<img src="map.gif" width="200" height="200" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="78,66,87,75" href="2.html" tooltip>
  <area shape="rect" coords="137,64,146,73" href="3.html">
  <area shape="rect" coords="29,160,37,169" href="5.html">
</map>
Ф-ция makeToolTipBox в самом конце.

Сделал так, чтобы ф-цию L(value) не надо было прописывать в onmouseover. Теперь она автоматом вешается на выбранные теги smile

мне нравицо )

Код


obj.onmouseover=function(ev){move(ev); L(obj); if(obj.old_onmouseover) obj.old_onmouseover(ev);}

Выходит следующее: к 2 подсказка отображается. Но мне захотелось, чтобы вообще не надо было к подсказкам ничего добовлять, чтобы js автоматически добавл tooltip к заданному в init тэгу.
в коде tooltip в функции applyToolTip решил вырезать строчку

Код


if(((t=obj.getAttribute('tooltip'))==null) & ((sets=obj.getAttribute('tooltip-set'))==null)) return; //no tooltip info

Тогда подсказки отображаются ко всем <area>, но когда наводишь мышкой (IE) на подсказку выскакивает "Stack overflow at line: 0". И ничего я не могу с этим поделать. Ибо в js разбираюсь в первый раз. Да и в Opera как-то криво работать начинают. (Не исчезают сразу, тормозят).

ps настройки следующие tooltip:

Код


ToolTip.defaultSets={
  type: "extern",   target: "desc",   appearance: "simple",
  floating: "static",   width: "",   height: "", 
  offsetX: 10,   offsetY: 10,   delayOn: 100, 
  delayOff: 200,   animationLength: 200 
}

ВотЪ. помогите плиз разобратся с возникшим глюком, если не трудно smile

p.s. http://pitbull.1gb.in/emap/ - Так это выглядит.
http://pitbull.1gb.in/emap/emap.zip - исходник.

Автор: badGamer 27.1.2007, 12:24

Уважаемый Sardar. Дальнейшие эксперименты привели к следующему. По непонятным причинам Ваша подсказка выдает ошибку когда наводишь мышкой (IE) на подсказку выскакивает "Stack overflow at line: 0". Да и в Opera как-то криво работать начинают. (Не исчезают сразу, тормозят).

Это происходит без малейших вмешательств в код. У меня она вскакивает как только я ставлю

Код


type: "extern", //tooltip type: simple, extern, extern-template
  target: "desc", //element ID
  appearance: "simple", //tooltip apearance: simple, blend
  floating: "static"

HTML соответсвенно приведен постом выше, правда вырезаны все ajax вызовы и прочее.

Помогите пожалуйста.

Автор: Sardar 27.1.2007, 19:49

Цитата(badGamer @ 27.1.2007, 11:24

)

Это происходит без малейших вмешательств в код. У меня она вскакивает как только я ставлю

Дай ссылку на страницу. Похоже где то бесконечная рекурсия, чего в моём коде не может быть.

Извиняюсь, сейчас очень занят, времени едва хватает проверять этот раздел. Через две недели перепишу подсказки с возможностью загружать инфу аяксом (весь общий код разбежится по ViJio, hook'иться можно с любого места). Раньше никак smile

Автор: badGamer 28.1.2007, 11:45

http://random.1gb.in/emap/map.html вот пожалуйста.
http://random.1gb.in/emap/emap.rar
Глянь эти ссылки. Если сможешь все-таки посмотри может быстрый взгял в родной код че-нить обнаружит...

Автор: Sardar 28.1.2007, 18:35

Цитата(badGamer @ 28.1.2007, 10:45

)

http://random.1gb.in/emap/map.html вот пожалуйста.

ИЕ7, Опера 9, FF2 - всё работает без ошибок.

ИЕ6 уже нет (винда снесла после апдейта), но если в коде ничего не менял, то под IE6 я раньше тестировал. Понятия не имею почему у тебя выскакивает ошибка... выкладывай версию браузера, призывай больше народу пусть потестят. Это при условии что ссылку дал ты верную и именно там ошибка smile

Автор: RomantikKZ 30.3.2007, 20:17

Здравствуйте,
А будет ли всетаки написан мануал? Т.к. очень нужно smile

Автор: Sardar 30.3.2007, 22:34

RomantikKZ, лучше спроси что не ясно (в отдельной теме) smile

Хотел переписать скрипт, затем ман. Скрипт соистоит из собственно самой логики подсказки + общих функций "на все случаи жизни" + парсер CSS подобного синтаксиса. Хотел это всё разделить по ViJio библиотеке, да с учёбой/работой всё руки не доходят :hmm

Автор: RomantikKZ 31.3.2007, 19:35

Жаль :( Да собсно многое не понятно...А особенно с этой проблемой сток овефлоу как у бадмэна...

Автор: Sardar 31.3.2007, 23:13

Нашёл ошибку, вернее по удивлялся как тупо я умею писать smile

В примере от badGamer на кучу объектов вешается единый объект-подсказка. В результате регистрируем в цепочку массу "почти одинаковых" обработчиков onmouseover и onmousemove. Даже если бы брауер не захлёбывался, то подсказка работала бы корректно только для самого последнего объекта, потому как состояние "открыто/закрыто" держится в нём (в контексте вызова makeToolTipBox для него), а не в объекте подсказки. Что заставило меня так писать не знаю, но знаю что единую подсказку поставить на кучу объектов пока нельзя smile

Всё равно подсказка простая, используй лучше тип simple (пропиши в ToolTip.defaultSets или задавай аттрибутом tooltip-set), этот тип раньше был выставлен по дефолту. Позже перепишу скрипт.

Автор: legat 16.5.2007, 17:35

Код


<span tooltip="<b>Подсказка =)</b>">Test</span>

Надо заменить ДВОЙНЫЕ КАВЫЧКИ на ОДИНАРНЫЕ, вот так:

Код


<span tooltip='<b>Подсказка =)</b>'>Test</span>

Ибо обычно при вёрстке делаются в HTML ДВОЙНЫЕ КАВЫЧКИ и при вставке их - будут глюки в работе.

А при вставке вёрстки с Двойными кавычками в Одинарные - всё работает нормально.

Пофиксите в самом первом треде код - новичкам сложности лишние будут с тем что есть сейчас.

Автор: DeMx 6.7.2007, 19:36

Подсказки работают не корректно в IE 7 (WinXP SP2). Даже вот этот пример:
http://sardar.vingrad.ru/projects/ToolTip/index.htm

Когда наводишь курсор на объект с подсказкой, то она успешно появляется, но когда убираешь - подсказка не исчезает и появляется ошибка: ""filters.Alpha.opacity" - есть null или не является объектом".