tooltips

[Carlo]

Crea un nuovo file CSS, inseriscili quel codice, e poi nello stylesheet principale aggiungi alla fine:

Codice: Seleziona tutto

@import url("nomestylesheet.css");

Ovviamente cambiando nomestylesheet.

[Hegalo]

no nulla...pero' do trovato questo phpbb3bbcodes.com => Quì! <= e in qualche modo anche queso non funziona,invece quello qroposto qualche messaggio dopo si..ecco io vorrei appunto eliminare quella standard bianca che viene con title=".." e metterci questa personalizzata diciamo sugli URL,cmq non e' che magari ci stiamo dimenticando il pezzo di codice sull'header???cmq non diventiamo matti,se non ce la facciamo ,magari con comodo tra un po di tempo sistemero'.

[Carlo]

Prova una cosa, nel tag <a> aggiungici all'interno anche questo parametro:

Codice: Seleziona tutto

class="tooltip"

[Hegalo]

allora non ce l'ho fatta pero' un'amico mi segnale questo : http://www.pragt.info/pragtinfo/index.p ... trol..html
solo che e' un sito tedesco e non so se ci siamo capiti proprio bene,non e' che ci puoi dare un okkio??

[Carlo]

Allora, da quel che ho capito, devi inserire tra gli stylesheet di phpBB (file content.css), questo:

Codice: Seleziona tutto

div#toolTip  {
  position: absolute;
  z-index: 1000;
  width: 220px;
  background: #F0E68C;
  border: 1px solid black;
  text-align: left;
  padding: 5px;
  min-height: 1em;
}

div#toolTip p { 
  margin: 0px;
  padding: 0px;
  color: #000080; 
  font: 11px verdana; 
}

Poi un altro file (JavaScript) da chiamare tooltips.js:

Codice: Seleziona tutto

// -----------------------------------------------
// Tooltip control (c) H.M. Pragt  2006
// Show the title attribute in a tooltip popup div
// Internet explorer and mozilla compatible
// Just insert this script into the page and all 
// titles on img and a tags will show a tooltip.
// Adjust the layout of the toolkit with the css file.
// -----------------------------------------------

// ------------------------------------
// Find the absolute position in the window
// ------------------------------------

function findPosX(obj) {
var curleft = 0;

  if (obj.offsetParent)  {
    while (obj.offsetParent) {
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  }
  else if (obj.x)
    curleft += obj.x;
  return curleft;
}

function findPosY(obj) {
var curtop = 0;

  if (obj.offsetParent)  {
    while (obj.offsetParent) {
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}


// ------------------------------------
// Define a eventcache object
// ------------------------------------

function EventCacheObj() {
 this.listEvents = [];

  // ------------------------------------
  // Define an add methode to the eventcache object
  // ------------------------------------
  this.add = function(node, sEventName, fHandler){
    this.listEvents.push(arguments);
  }

  // ------------------------------------
  // Define a flush methode to the eventcache object
  // ------------------------------------

  this.flush = function () {
  var i, item;

    for (i = this.listEvents.length - 1; i >= 0; i--) {
      item = this.listEvents[i];
      if (item[0].removeEventListener){
         item[0].removeEventListener(item[1], item[2], item[3]);
      }
      if (item[1].substring(0, 2) != "on") {
        item[1] = "on" + item[1];
      }
      if (item[0].detachEvent) {
        item[0].detachEvent(item[1], item[2]);
      }
      item[0][item[1]] = null;
    }
  }
}


  

// ------------------------------------
// Add any event to any object.
// ------------------------------------

function addEvent( obj, type, fn ) {
  if (obj.addEventListener) {     // Mozilla
    obj.addEventListener( type, fn, false );
    EventCache.add(obj, type, fn);
  }
  else if (obj.attachEvent) { // IE
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
    EventCache.add(obj, type, fn);
  }
  else {
    obj["on"+type] = obj["e"+type+fn];
  }
}


// ------------------------------------
// The tooltip object.
// ------------------------------------

function ToolTipObj() { 
  this.tipElements = ['a','img'];  // Array of allowable elements for toolTips
  this.obj = Object;              // Current element that youre hovering over
  this.tip = Object;              // The actual toolTip DIV itself
 
  this.init = function () {
    if (!document.getElementById || 
        !document.createElement || 
        !document.getElementsByTagName ) {
      return;
    }
    var i,j;
    this.tip = document.createElement('div');
    this.tip.id = 'toolTip';
    document.getElementsByTagName('body')[0].appendChild(this.tip);
    this.tip.style.top = '0';
    this.tip.style.visibility = 'hidden';
    var tipLen = this.tipElements.length;
    for ( i=0; i<tipLen; i++ ) {
      var current = document.getElementsByTagName(this.tipElements[i]);
      var curLen = current.length;
      for ( j=0; j<curLen; j++ ) {
        addEvent(current[j],'mouseover',this.tipOver);
        addEvent(current[j],'mouseout',this.tipOut);
        current[j].setAttribute('tip',current[j].title);
        current[j].removeAttribute('title');
      }
    }
  }

  this. tipOut = function () {
    ToolTip.tip.style.visibility = 'hidden';
  }

  this.tipOver = function (e) {
    ToolTip.obj = this;
    ToolTip.ShowTip();
  }
  
  
  this.ShowTip = function () {
    var Ttop,Tleft,ClientWidth,ClientHeight,ScrollTop;
    var TipWidth,TipHeight;

    if (this.obj.getAttribute('tip').length == 0) {
      return;
    }  
    Tleft = findPosX(this.obj);  // offsetLeft;
    Ttop = findPosY(this.obj);  //offsetTop;
    TipWidth = this.tip.offsetWidth;
    TipHeight = this.tip.offsetHeight;
    if (self.innerHeight) { // all except Explorer
      ClientWidth = self.innerWidth;
      ClientHeight = self.innerHeight;
      ScrollTop = self.scrollTop;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
      ClientWidth = document.documentElement.clientWidth;
      ClientHeight = document.documentElement.clientHeight;
      ScrollTop = document.documentElement.scrollTop;
    }
    else if (document.body) { // other Explorers
      ClientWidth = document.body.clientWidth;
      ClientHeight = document.body.clientHeight;
      ScrollTop = document.body.scrollTop;
    }
    this.tip.innerHTML = "<p>"+this.obj.getAttribute('tip')+"</p>"; 
    Ttop = Ttop - (TipHeight + 5);  
    if ((Tleft + TipWidth) > ClientWidth) Tleft = ClientWidth - TipWidth;
    if (Tleft < 1) Tleft = 1;
    if (Ttop < 1) Ttop = 1;
    if (Ttop < ScrollTop) Ttop = ScrollTop + (TipHeight + 5);
    this.tip.style.left = Tleft+'px';
    this.tip.style.top = Ttop+'px';
    this.tip.style.visibility = 'visible';
  }
}


// ------------------------------------
// Create wrapper functions
// ------------------------------------

function pageLoader() {
  ToolTip.init();
}
function pageFlusher() {
  EventCache.flush();
}

// ------------------------------------
// Create the objects
// ------------------------------------
var EventCache = new EventCacheObj();
var ToolTip = new ToolTipObj();

addEvent(window,'load',pageLoader);
addEvent(window,'unload',pageFlusher);

E poi nel template overall_header.html, prima del tag </head> questo:

Codice: Seleziona tutto

<script type="text/javascript" src="http://www.tuosito.it/tooltips.js"></script>

Cambiando ovviamente il percorso del file (http://www.tuosito.it/tooltips.js) con quello rispetto al tuo forum.

Il tooltip visualizzerà in esso ciò che è scritto nell'attributo title del tag <a>.

[Hegalo]

io ho scaricato da li ipachetto e dentro c'e' in css un js e quello che sembra un html,carico sti file oppure provo come hai detto tu,,,o tutte'due??

[Carlo]

Fai come ti ho detto io.

[Hegalo]

dove lo metto il js
messo nei tempelate,ma mi e' venuto un dubbio...non e' che pero' e' uguale a quello predefinito??ed e' magari per questo che non noto differenze??

[Carlo]

Per la posizione, puoi metterlo dove vuoi.
Per il tuo dubbio, non ho capito che intendi.

[Hegalo]

ihih il mio dubbio e' che sai che e' una piccola pop up bianca l'atributo "title" come hai detto tu prima,ecco io mi chiedevi se magari non vediamo differenza perche' magari nil codice che abbiamo inserito e' il medesimo di quello che c'e' normalmente