How do I add hover examine feature?

Hover examining is an very interesting feature that allows you to hover your mouse over a link or image and see the stats everything.
For example.

When hovering over the weapon I see these.

Code:

AK47
Type: Assault Rifle
Damage: x28-7 (196) Rapid range shots
2 uses per a match
3400 RC coins - Sellback for 175 RC coins

And even in the examine box it will also display what RC coins are.

You can use something like this, for example.

Just add this to a new script in all the pages :

Code:

(function(b){b.fn.extend({popUp:function(e){e=b.extend({},b.PopUp.defaults,e);this.each(function(){new b.PopUp(this,e)});return this}});b.PopUp=function(e,a){b(e).on({mouseenter:function(c){var f=a.content;if(!a.useDataAttrs)var e=a.data[b(this).data(a.identificator)];var g=/{(.*?)}/g,d,h=[],k="";if(null!==a.contentRepeat){for(;null!==(d=g.exec(a.contentRepeat));)d.index===g.lastIndex&&g.lastIndex++,h.push(d);d=/{(\S+)}/.exec(a.repeatKeyword);e[d[1]].forEach(function(d){for(var b=a.contentRepeat,
c=0;c<h.length;c++)b=b.replace(h[c][0],d[h[c][1]]);k=k.concat(b)})}for(;null!==(d=g.exec(a.content));)d.index===g.lastIndex&&g.lastIndex++,a.useDataAttrs?f=f.replace(d[0],b(this).data(d[1])):e[d[1]]&&d[0]!=a.repeatKeyword?f=f.replace(d[0],e[d[1]]):e[d[1]]&&d[0]==a.repeatKeyword&&(f=f.replace(d[0],k));if(0==b("#popup").length)switch(c=b("<div id='popup' style='display: none;top: "+(c.pageY-a.offset)+"px;left: "+(c.pageX+a.offset)+"px'>"+f+"</div>").appendTo("body"),a.animationIn){case "fadeIn":c.fadeIn(a.timingIn);
break;case "show":c.show(a.timingIn)}},mousemove:function(c){b("#popup").css({top:c.pageY-a.offset+"px",left:c.pageX+a.offset+"px"})},mouseleave:function(){var c=b("#popup"),e=function(){return function(){b(".removing").remove()}};c.addClass("removing");c.removeAttr("id");switch(a.animationOut){case "hide":c.hide(a.timingOut,e());break;case "fadeOut":c.fadeOut(a.timingOut,e())}}});a.follow||b(e).off("mousemove")};b.PopUp.defaults={follow:!0,offset:10,content:"content",contentRepeat:null,repeatKeyword:"{repeat}",
identificator:"id",data:void 0,useDataAttrs:!1,timingIn:750,timingOut:250,animationIn:"fadeIn",animationOut:"fadeOut"}})(jQuery);
$('head').append('<style>#popup,.removing{position: absolute;background-color: #fff;}</style>');

$(function(){$("img[data-tooltip]").popUp({
      content: '{tooltip}',
      useDataAttrs: true
  });
});

Then you create your image like this :

Code:

<img src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png" data-tooltip="AK47<br>Type: Assault Rifle<br>Damage: x28-7 (196) Rapid range shots<br>2 uses per a match<br>3400 RC coins - Sellback for 175 RC coins" />

The

Code: data-tooltip=""

attribute is where you place your tooltip text. You can use HTML to add formatting.

The result will look like this :


You may want to change the tooltip design, so use the rule below to add different styles to it.

Code:

#popup,.removing{
  position: absolute;
  background-color: #fff;
}

@Ange Tuteur
How do I add this script? Guidelines please?
I really appreciate your help.

@dr.kran;
The first code Ange gave you (The JS code) can be added by going to APC > Modules > Javascript Codes Management > Create New Script
Then just fill out the following fields:
Title: Examine Pop-up
Placement: In all pages
JS Code: paste first code here
And save.

Then you'd take the third code Ange gave you (The CSS) and paste it at the end of your stylesheet
ACP > Display > Colors > CSS Stylesheet
And save.

Then the second code he gave you (The HTML itself) would most likely have to be used in a custom-made HTML page where you want to display all of the weapons.
You can make an HTML page by doing the following:
ACP > Modules > HTML Pages Management > Create New page in advanced mode (HTML)
Make sure to tick off yes for using your forum's header and footer c:

Doesn't work, do you mind helping me on my forums?
http://castlevania-1.forumotion.com/

Valoish wrote:@dr.kran;
The first code Ange gave you (The JS code) can be added by going to  APC > Modules > Javascript Codes Management > Create New Script
Then just fill out the following fields:
Title: Examine Pop-up
Placement: In all pages
JS Code: paste first code here
And save.


Then you'd take the third code Ange gave you (The CSS) and paste it at the end of your stylesheet
ACP > Display > Colors > CSS Stylesheet
And save.


Then the second code he gave you (The HTML itself) would most likely have to be used in a custom-made HTML page where you want to display all of the weapons.
You can make an HTML page by doing the following:
ACP > Modules > HTML Pages Management > Create New page in advanced mode (HTML)
Make sure to tick off yes for using your forum's header and footer c:

I'm very sorry that I was unsuccessful in carrying out the format that was provided.
(editing.

First step:
Go to the Admin Panel, Modules, Javascript Codes Management and add a new script with this options:
1.Name:whatever you want
2.Placement:All pages
3.Code:

Code:

        (function(b){b.fn.extend({popUp:function(e){e=b.extend({},b.PopUp.defaults,e);this.each(function(){new b.PopUp(this,e)});return this}});b.PopUp=function(e,a){b(e).on({mouseenter:function(c){var f=a.content;if(!a.useDataAttrs)var e=a.data[b(this).data(a.identificator)];var g=/{(.*?)}/g,d,h=[],k="";if(null!==a.contentRepeat){for(;null!==(d=g.exec(a.contentRepeat));)d.index===g.lastIndex&&g.lastIndex++,h.push(d);d=/{(\S+)}/.exec(a.repeatKeyword);e[d[1]].forEach(function(d){for(var b=a.contentRepeat,
        c=0;c<h.length;c++)b=b.replace(h[c][0],d[h[c][1]]);k=k.concat(b)})}for(;null!==(d=g.exec(a.content));)d.index===g.lastIndex&&g.lastIndex++,a.useDataAttrs?f=f.replace(d[0],b(this).data(d[1])):e[d[1]]&&d[0]!=a.repeatKeyword?f=f.replace(d[0],e[d[1]]):e[d[1]]&&d[0]==a.repeatKeyword&&(f=f.replace(d[0],k));if(0==b("#popup").length)switch(c=b("<div id='popup' style='display: none;top: "+(c.pageY-a.offset)+"px;left: "+(c.pageX+a.offset)+"px'>"+f+"</div>").appendTo("body"),a.animationIn){case "fadeIn":c.fadeIn(a.timingIn);
        break;case "show":c.show(a.timingIn)}},mousemove:function(c){b("#popup").css({top:c.pageY-a.offset+"px",left:c.pageX+a.offset+"px"})},mouseleave:function(){var c=b("#popup"),e=function(){return function(){b(".removing").remove()}};c.addClass("removing");c.removeAttr("id");switch(a.animationOut){case "hide":c.hide(a.timingOut,e());break;case "fadeOut":c.fadeOut(a.timingOut,e())}}});a.follow||b(e).off("mousemove")};b.PopUp.defaults={follow:!0,offset:10,content:"content",contentRepeat:null,repeatKeyword:"{repeat}",
        identificator:"id",data:void 0,useDataAttrs:!1,timingIn:750,timingOut:250,animationIn:"fadeIn",animationOut:"fadeOut"}})(jQuery);
        $('head').append('<style>#popup,.removing{position: absolute;background-color: #fff;}</style>');
       
        $(function(){$("img[data-tooltip]").popUp({
              content: '{tooltip}',
              useDataAttrs: true
          });
        });

Second step:Go to the Admin Panel, Display, Colors, CSS stylesheet and add this code at the bottom of the code:

Code:

#popup,.removing{
position: absolute;
background-color: #fff;
}

Now place this code where you want the image and the popup to show:

Code:

<img src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png" data-tooltip="AK47<br>Type: Assault Rifle<br>Damage: x28-7 (196) Rapid range shots<br>2 uses per a match<br>3400 RC coins - Sellback for 175 RC coins" />

Wolfuryo wrote:First step:
Go to the Admin Panel, Modules, Javascript Codes Management and add a new script with this options:
1.Name:whatever you want
2.Placement:All pages
3.Code:

Code:

        (function(b){b.fn.extend({popUp:function(e){e=b.extend({},b.PopUp.defaults,e);this.each(function(){new b.PopUp(this,e)});return this}});b.PopUp=function(e,a){b(e).on({mouseenter:function(c){var f=a.content;if(!a.useDataAttrs)var e=a.data[b(this).data(a.identificator)];var g=/{(.*?)}/g,d,h=[],k="";if(null!==a.contentRepeat){for(;null!==(d=g.exec(a.contentRepeat));)d.index===g.lastIndex&&g.lastIndex++,h.push(d);d=/{(\S+)}/.exec(a.repeatKeyword);e[d[1]].forEach(function(d){for(var b=a.contentRepeat,
        c=0;c<h.length;c++)b=b.replace(h[c][0],d[h[c][1]]);k=k.concat(b)})}for(;null!==(d=g.exec(a.content));)d.index===g.lastIndex&&g.lastIndex++,a.useDataAttrs?f=f.replace(d[0],b(this).data(d[1])):e[d[1]]&&d[0]!=a.repeatKeyword?f=f.replace(d[0],e[d[1]]):e[d[1]]&&d[0]==a.repeatKeyword&&(f=f.replace(d[0],k));if(0==b("#popup").length)switch(c=b("<div id='popup' style='display: none;top: "+(c.pageY-a.offset)+"px;left: "+(c.pageX+a.offset)+"px'>"+f+"</div>").appendTo("body"),a.animationIn){case "fadeIn":c.fadeIn(a.timingIn);
        break;case "show":c.show(a.timingIn)}},mousemove:function(c){b("#popup").css({top:c.pageY-a.offset+"px",left:c.pageX+a.offset+"px"})},mouseleave:function(){var c=b("#popup"),e=function(){return function(){b(".removing").remove()}};c.addClass("removing");c.removeAttr("id");switch(a.animationOut){case "hide":c.hide(a.timingOut,e());break;case "fadeOut":c.fadeOut(a.timingOut,e())}}});a.follow||b(e).off("mousemove")};b.PopUp.defaults={follow:!0,offset:10,content:"content",contentRepeat:null,repeatKeyword:"{repeat}",
        identificator:"id",data:void 0,useDataAttrs:!1,timingIn:750,timingOut:250,animationIn:"fadeIn",animationOut:"fadeOut"}})(jQuery);
        $('head').append('<style>#popup,.removing{position: absolute;background-color: #fff;}</style>');
        
        $(function(){$("img[data-tooltip]").popUp({
              content: '{tooltip}',
              useDataAttrs: true
          });
        });

Second step:Go to the Admin Panel, Display, Colors, CSS stylesheet and add this code at the bottom of the code:

Code:

#popup,.removing{
position: absolute;
background-color: #fff;
}

Now place this code where you want the image and the popup to show:

Code:

<img src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png" data-tooltip="AK47<br>Type: Assault Rifle<br>Damage: x28-7 (196) Rapid range shots<br>2 uses per a match<br>3400 RC coins - Sellback for 175 RC coins" />

The last one I don't understand though.
Can you change it to reply code formation?
http://grandexchange.forumotion.com/t2-contact-registry#12
I've also added to HTML

You have to enable HTML on your forum for the code to work.

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.

How do I find the enable this option?

Oh wait, I found it.

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.

Nope still doesn't work.
Even with new post.

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.

The format I've asked for would be like this.

Code:

[url=http://help.forumotion.com/forum]<img
 title="TEST" alt="TEST"
src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png">[/url]

<img
 title="TEST" alt="TEST"
src="https://i.servimg.com/u/f58/19/11/83/14/ak47_210.png">

Code:

[img title="HOVERTEXT"]URL[/img]

[img title="HOVERTEXT"]https://i.servimg.com/u/f58/19/11/83/14/ak47_210.png[/img]

You have to activate HTML for the whole forum and in your profile.

SLGray wrote:You have to activate HTML for the whole forum and in your profile.

Sorry, the image had it on, and it's still not working.

So the image appears, but not the tooltip?

SLGray wrote:So the image appears, but not the tooltip?  

Here's the image of HTML being activated but I'm not certain on how to use tooltip

A little help there?

Profile > Preferences
Allow HTML:  Yes

I'm not sure I got this right. You have HTML active on your forum and the codes are not working?

Or they are working but you want to use it as a BBCode?

I'll probably make another code myself because it's easier for me to do so then see what's wrong with the one posted by Ange.

Wolfuryo wrote:I'm not sure I got this right. You have HTML active on your forum and the codes are not working?

Or they are working but you want to use it as a BBCode?

I'll probably make another code myself because it's easier for me to do so then see what's wrong with the one posted by Ange.

BBCodes would do just fine, HTML's difficult work.