[Tutorial] Informações ao passar o mouse em cima do título

Informações:
Autor: Desconhecido
Funcionalidade:Todas as versões

---

Acesse:

Painel de Controle -> Modulos -> Html e Javascript -> Gestão dos codigos Javascript

E Crie um novo Javascript com investimento nos sub-fórum com esse código:

Código:


var versionMinor = parseFloat(navigator.appVersion);
var versionMajor = parseInt(versionMinor);
var IE = document.all && !window.opera && versionMajor < 7;
var IE7 = document.all && !window.opera && versionMajor >= 7;
var OP = window.opera;
var FF = document.getElementById;
var NS = document.layers;
function get_item(name, opener) {
    if (IE) {
        return (opener) ? window.opener.document.all[name] : document.all[name]
    } else if (FF) {
        return (opener) ? window.opener.document.getElementById(name) : document.getElementById(name)
    } else if (NS) {
        return (opener) ? window.opener.document.layers[name] : document.layers[name]
    }
}
function change_display(name, value, opener) {
    if (IE) {
        element = (opener == true) ? window.opener.document.all[name].style : document.all[name].style
    } else if (FF) {
        element = (opener == true) ? window.opener.document.getElementById(name)
            .style : document.getElementById(name)
            .style
    } else if (NS) {
        element = (opener == true) ? window.opener.document.layers[name] : document.layers[name]
    }
    element.display = value
}
function reverse_display(name, opener) {
    element = get_item(name);
    if (!element) {
        return false
    }
    var display = (element.style.display != 'block') ? 'block' : 'none';
    change_display(name, display, opener)
}
var current_tooltip;
function show_tooltip(caller, content, content_title) {
    var current_tooltip = get_item('tooltip');
    if (!current_tooltip) {
        var current_tooltip = document.createElement('div');
        current_tooltip.setAttribute('id', 'tooltip');
        document.body.appendChild(current_tooltip)
    }
    current_tooltip.style.zIndex = 100;
    current_tooltip.style.position = 'absolute';
    if (content_title) {
        content = '<p class="header">' + content_title + '</p><p>' + content + '</p>'
    } else {
        content = '<p>' + content + '</p>'
    }
    current_tooltip.innerHTML = content;
    current_tooltip.style.visibility = 'visible';
    caller.onmousemove = move_tooltip;
    caller.onmouseout = function() {
        current_tooltip.style.visibility = "hidden"
    };
    caller.title = ''
}
var offsetxpoint = -60;
var offsetypoint = 20;
var real_body = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
real_body = (document.documentElement) ? document.documentElement : document.body;
function move_tooltip(e) {
    var curX = (!IE) ? e.pageX : event.clientX + real_body.scrollLeft;
    var curY = (!IE) ? e.pageY : event.clientY + real_body.scrollTop;
    var rightedge = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20;
    var bottomedge = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20;
    var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000;
    current_tooltip = get_item('tooltip');
    if (rightedge < current_tooltip.offsetWidth) current_tooltip.style.left = IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + e.clientX - current_tooltip.offsetWidth + "px";
    else if (curX < leftedge) current_tooltip.style.left = "5px";
    else current_tooltip.style.left = curX + offsetxpoint + "px"; if (bottomedge < current_tooltip.offsetHeight) current_tooltip.style.top = IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - current_tooltip.offsetHeight - offsetypoint + "px";
    else current_tooltip.style.top = curY + offsetypoint + "px"
}
function popup(link, oWidth, oHeight, oName) {
    if (oWidth > screen.width) {
        oWidth = screen.width
    }
    if (oHeight > screen.height) {
        oHeight = screen.height
    }
    var PosX = (screen.width - oWidth) / 2;
    var PosY = (screen.height - oHeight) / 2;
    var params = "width=" + oWidth + ", height=" + oHeight + ", top=" + (PosY) + ",left=" + (PosX);
    params += ('toolbar=0,menubars=0,location=no,scrollbars=1,directories=0,statubar=0,resizable=0');
    window.open(link, ((!oName) ? 'popuped' : 'popuped'), params)
}
function add_search_engine(engine, title, category) {
    if (FF && (typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
        window.sidebar.addSearchEngine(engine + '_ff.src', engine + '.gif', title, category)
    } else if (IE7) {
        window.external.AddSearchProvider(engine + '_ie.src')
    } else {
        alert('Your browser do not support this utility')
    }
}
inter = '';
speed = 10;
frequency = 10;
L_txt_close = 'Clic to close this preview';
function showImage(event, finalWidth, finalHeight, image, img_width, img_height) {
    if (document.getElementById('preview_block')
        .firstChild) {
        for (var i = 0; i < document.getElementById('preview_block')
            .childNodes.length; i++) {
            document.getElementById('preview_block')
                .removeChild(document.getElementById('preview_block')
                    .childNodes[i])
        }
    }
    var mouseX = 0;
    var mouseY = 0;
    var vScroll = 0;
    var hScroll = 0;
    var inWidth = getWindowWidth();
    var inHeight = getWindowHeight();
    if (document.all) {
        mouseX = window.event.clientX + document.documentElement.scrollLeft;
        mouseY = window.event.clientY + document.documentElement.scrollTop;
        vScroll = document.documentElement.scrollTop;
        hScroll = document.documentElement.scrollLeft
    } else {
        mouseX = event.clientX + window.scrollX;
        mouseY = event.clientY + window.scrollY;
        vScroll = window.scrollY;
        hScroll = window.scrollX
    }
    var div = document.createElement('div');
    div.style.height = '0';
    div.style.width = '0';
    div.className = 'preview';
    div.style.position = 'absolute';
    div.style.top = mouseY + 'px';
    div.style.left = mouseX + 'px';
    div.style.zIndex = '1000';
    div.setAttribute('id', 'image');
    div.onclick = new Function("document.getElementById('preview_block').removeChild(document.getElementById('preview_block').firstChild);window.clearInterval(inter);");
    var finalLeft = (inWidth - finalWidth) / 2;
    var finalTop = (inHeight - finalHeight) / 2;
    finalTop += vScroll;
    var stepLeft = (finalLeft - mouseX) / speed;
    var stepTop = (finalTop - mouseY) / speed;
    var stepWidth = finalWidth / speed;
    var stepHeight = finalHeight / speed;
    document.getElementById('preview_block')
        .appendChild(div);
    if (!img_width) {
        img_width = 840
    }
    if (!img_height) {
        img_height = 600
    }
    inter = window.setInterval('moveAndResize(' + stepLeft + ',' + stepTop + ',' + stepWidth + ',' + stepHeight + ',' + finalHeight + ',"' + image + '",' + img_width + ',' + img_height + ')', frequency);
    return false
}
function moveAndResize(stepLeft, stepTop, stepWidth, stepHeight, finalHeight, image, img_width, img_height) {
    if (!document.getElementById('preview_block') || !document.getElementById('preview_block')
        .firstChild) {
        window.clearInterval(inter);
        return false
    }
    var div = document.getElementById('preview_block')
        .firstChild;
    var height = div.style.height.match(/[0-9\.]*/);
    var width = div.style.width.match(/[0-9\.]*/);
    var top = div.style.top.match(/[0-9\.]*/);
    var left = div.style.left.match(/[0-9\.]*/);
    height = Number(height);
    width = Number(width);
    top = Number(top);
    left = Number(left);
    height += stepHeight;
    width += stepWidth;
    top += stepTop;
    left += stepLeft;
    div.style.height = height + 'px';
    div.style.width = width + 'px';
    div.style.top = top + 'px';
    div.style.left = left + 'px';
    if (height >= finalHeight) {
        window.clearInterval(inter);
        var img = document.createElement('img');
        img.setAttribute('src', image);
        img.setAttribute('alt', L_txt_close);
        img.setAttribute('title', L_txt_close);
        img.setAttribute('width', img_width);
        img.setAttribute('height', img_height);
        img.style.cursor = 'pointer';
        div.appendChild(img);
        var p = document.createElement('p');
        p.style.cursor = 'pointer';
        div.appendChild(p)
    }
}
function getWindowHeight() {
    var pageHeight = window.innerHeight;
    pageHeight = (pageHeight) ? pageHeight : document.documentElement.clientHeight;
    pageHeight = (pageHeight) ? pageHeight : document.body.clientHeight;
    return pageHeight
}
function getWindowWidth() {
    var pageWidth = window.innerWidth;
    pageWidth = (pageWidth) ? pageWidth : document.documentElement.clientWidth;
    pageWidth = (pageWidth) ? pageWidth : document.body.clientWidth;
    return pageWidth
}

Depois disto, acesse:

Painel de Controle -> Visualização -> Templates -> Geral -> Topic_list_box

procure por:

{topics_list_box.row.TOPIC_TITLE}

 

Substitua por:

Código:

<h2 class="topic-title"><a onmouseover="show_tooltip(this,'Tópico:  {topics_list_box.row.TOPIC_TITLE} <br><br>Postado em: {topics_list_box.row.FIRST_POST_TIME}<br><br>Visualizaçõess:  {topics_list_box.row.VIEWS}<br><br>Respostas: {topics_list_box.row.REPLIES}');" onmouseout="hidetip();" class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>

Feito isto, salve seu template e acesse:

Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Folha de Estilo CSS

E Adicione esse código:

Código:

#tooltip .header {display:none}
        #tooltip .tiplFMvi{border-bottom:1.5px dashed;padding-bottom:5px;margin-bottom:5px}
        #tooltip{max-width:550px;position:absolute;background-color:#FFF;border:2px solid blue;padding:5px;border-radius:3px;color:#000;z-index:99;}

Resultado: