FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 20 users online :: 0 Registered, 0 Hidden and 20 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

How do I add hover examine feature?

View previous topic View next topic Go down

Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Fri 10 Mar 2017, 10:58

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.

How do I add hover examine feature? Ak47_210 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 13 Mar 2017, 14:46

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 :
How do I add hover examine feature? Captur16

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;
}
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Sun 19 Mar 2017, 22:03

@Ange Tuteur
How do I add this script? Guidelines please?
I really appreciate your help.
Valoish
Valoish
Graphic Designer
Gender : Female
Age : 27
Posts : 3671
Points : 7120
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish Mon 20 Mar 2017, 10:15

@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:
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Thu 23 Mar 2017, 06:18

Doesn't work, do you mind helping me on my forums?
http://castlevania-1.forumotion.com/
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Fri 25 Aug 2017, 17:24

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.
How do I add hover examine feature? R110

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.
How do I add hover examine feature? R210

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:
How do I add hover examine feature? R310

I'm very sorry that I was unsuccessful in carrying out the format that was provided.
(editing.
Wolfuryo
Wolfuryo

Gender : Male
Posts : 256
Points : 3568
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostWolfuryo Wed 30 Aug 2017, 09:17

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" />
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 10:20

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
Wolfuryo
Wolfuryo

Gender : Male
Posts : 256
Points : 3568
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostWolfuryo Wed 30 Aug 2017, 10:30

You have to enable HTML on your forum for the code to work.
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 10:33

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.
How do I find the enable this option?
How do I add hover examine feature? 1_code10
Oh wait, I found it.
How do I add hover examine feature? 1_code11
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 10:40

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.
Nope still doesn't work.
Even with new post.
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 11:39

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]
SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7107
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Wed 30 Aug 2017, 14:30

You have to activate HTML for the whole forum and in your profile.
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 14:33

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.
SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7107
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Wed 30 Aug 2017, 14:38

So the image appears, but not the tooltip?

Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 14:40

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


How do I add hover examine feature? 1_code10
Here's the image of HTML being activated but I'm not certain on how to use tooltip
How do I add hover examine feature? 1_code11
A little help there?
SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7107
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Wed 30 Aug 2017, 14:43

Profile > Preferences
Allow HTML:  Yes
Wolfuryo
Wolfuryo

Gender : Male
Posts : 256
Points : 3568
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostWolfuryo Wed 30 Aug 2017, 15:41

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.
Dr.kran
Dr.kran

Gender : Male
Age : 31
Posts : 73
Points : 2866
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
http://castlevania-1.forumotion.com/

PostDr.kran Wed 30 Aug 2017, 16:43

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.
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum