Inline Hover Tips / Discussion

This is the discussion related to the wiki page Inline Hover Tips.

page 1 of 212next »

This is fun!

James Kanjo 27 Aug 2009 07:08

I love which are great for a number of reasonshover tips. Especially when I can do them inline, and without the use of Hover over the “1” next to Wikidot¹.
That is a footnote. The shame about footnotes is that you can't click on the links in the hovering footnote.footnotes. When using footnotes, Wikidot automatically renders a footnote block at the end of the page (naturally, it IS a footnote after all). Wikidot footnotes have inbuilt hover popups, which is the main reason I used to use them.

The great thing about these hover tips is that they're made of CSS… so they will function perfectly when your preview your posts/pages (unlike the javascript footnotes)

I've created a HowTo to do this HowTo use inline hover tips.

Below is an automatically generated footnote block, because I used a footnote in this post…can you find it?
Indeed, this is a hover tip for the sake of having a hover tip.
But I can't resist!
They're just too much fun!.

Footnotes

1. A simple and sophisticated Wiki engine (click that link!)

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Last edited on 27 Aug 2009 07:14 by James Kanjo + Show more

Re: This is fun!

Helmuti_pdorf 27 Aug 2009 07:18

Realy great fun!

Where have you stored/attached the span class ?

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: This is fun!

James Kanjo 27 Aug 2009 07:30

I snuck the CSS into the community CSS…

Speaking of which, I'm surprised we haven't made the CSS editable for community members. Do you reckon we should?

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: This is fun!

Helmuti_pdorf 27 Aug 2009 07:51

No, admin:manage should realy be open only for admins…

Edit: if you want , ask teh other admins in our admon forum ?

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 27 Aug 2009 07:51 by Helmuti_pdorf + Show more

Re: This is fun!

James Kanjo 27 Aug 2009 07:56

Yeah, it's something to discuss. But I think I will make a CSS page “read-only” (for learning purposes).

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: This is fun!

James Kanjo 27 Aug 2009 08:08

CSS

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

This is pretty cool!

Timothy Foster 27 Aug 2009 12:27

This is really neat. Nice workNo really, this is great!!

---

— Blog ~ Life's Handbook ~ Wikidot Design & Development

Re: This is pretty cool!

kawina 27 Aug 2009 14:45

That is really cool indeed, and certainly very useful. I'll use it, for instance, over links to pdf files to remind users to "right click + save target as". Which brings me to another CSS topic…

Is it possible, via CSS, to force the browser to open a dialog box (save vs. open) every time someone clicks on a link to a pdf file?

I'm having a frequent issue with heavier pdf files: the user clicks on the link and nothing seems to happen. The file is actually being downloaded, but the user doesn't know that and ends up giving up. Most of the error reports I've been receiving are from users who failed to download pdfs.

Any solution?

---

---

Eduardo R. Ribeiro
Macro-Jê linguistics, &c.

Last edited on 27 Aug 2009 14:49 by kawina + Show more

Re: This is pretty cool!

Ed Johnson 27 Aug 2009 16:14

If your users are using Acrobat Reader, have them open Acrobat and edit their preferences. There is a "Display PDF in browser" setting under the "Internet" section that is enabled by default. Clearing that will have the file open in Acrobat, but not inside the browser window. They should get some immediate feedback rather than the long pause using this setting.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Question about this

Timothy Foster 27 Aug 2009 18:04

What happens if you try and print something with this?

Another question, why does it fail with the simple underline syntax?
This is a This is underline texttest.

---

— Blog ~ Life's Handbook ~ Wikidot Design & Development

Last edited on 27 Aug 2009 18:25 by Timothy Foster + Show more

Re: Question about this

Ed Johnson 27 Aug 2009 20:06

It looks like the extra <span>…</span> tag created by the underline is tripping up the hover text.

Wikidot markup:
This is a [[span class="hover"]][[span]]This is __underline__ text[[/span]]test[[/span]].
HTML rendering:
This is a <span class="hover" style=""><span style="">This is <span style="text-decoration: underline;">underline</span> text</span>test</span>.
 
Wikidot markup:
This is really neat. [[span class="hover"]]Nice work[[span]]No really, this is great![[/span]][[/span]]!
HTML rendering:
This is really neat. <span class="hover" style="">Nice work<span style="">No really, this is great!</span></span>!

Bold and italics work fine, probably because they don't render <span> tags. My guess is that any inline formatting that creates an extra <span> tag will cause problems.

This is a [[span class="hover"]][[span]]This is **bold** text[[/span]]bold test[[/span]].
This is an [[span class="hover"]][[span]]This is //italic// text[[/span]]italic test[[/span]].
This is a [[span class="hover"]][[span]]This is **//bold, italic//** text[[/span]]bold, italic test[[/span]].

This is a This is bold textbold test.

This is an This is italic textitalic test.

This is a This is bold, italic textbold, italic test.

Actually, this is a pretty neat side-effect of this markup. The cascading popup is interesting in it's own right.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 27 Aug 2009 23:14 by Ed Johnson + Show more

Re: Question about this

James Kanjo 27 Aug 2009 22:12

Another question, why does it fail with the simple underline syntax?

Because I didn't consider nested spans within the nested span of a span.

Thanks for reporting this, I've fixed it with the addition of simple CSS reversal code:

.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}

Cheers Ed, you nailed the problem… like a hammer :D

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: Question about this

James Kanjo 28 Aug 2009 03:59

What happens if you try and print something with this?

The hover-tips don't print.

The only problem that really exists happens when you use RSS feeds. The hover tip is displayed inline with the text, as though the spans never existed.

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

hmm....

graphmastur 28 Aug 2009 01:16

So if I did Could I have it stay, in order to click a link, or whatever? recent forum posts.this

Apparently, I can!!!

How to replicate the effect of %agohover?

scottplan 11 Feb 2010 01:52

This is a great tool, and I'm seeing I can tweak the CSS of the span class.

I've got this list, which features two different styles of hovering.

The first (page titles), draws on this span class trick — which now seems to be standard in at least some of the off-the-shelf themes.

The second (agohover) seems to draw on the "odate" class in the base CSS. It changes the cursor style to show a question mark to the right, it positions the hover text well away from the original text, and the hover text tracks with the cursor.

I want to make the first class work like the second one. I realize that would prevent me from selecting or clicking any of the hover text.

Can you point me to the best way to do this? Is this just a matter of pasting CSS into the "hover" class?

Re: How to replicate the effect of %agohover?

Ed Johnson 11 Feb 2010 02:31

Messing with Web Developer, I came up with 2 small changes to get closer to what you want with the title hover behavior:

.hover:hover span {
    text-indent: 0;
    margin: 30px -20px 0 50px;
...
...
}

The text-indent fixed the hanging hover text that blows out the left side of the hover box.

Play with the top margin (30 px) and left margin (50px) to adjust the space from the link text. I can't figure out what the -20px right margin is doing (seems to have no effect), so I just left it alone.

I think the odate hover uses some javascript that makes the hover text follow the mouse pointer. You might also be interested in OverLIB whose praises I was singing 5 months ago. Even without it being directly supported, you can use it with iframed content (which obviously won't work with the navigator in your example).

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: How to replicate the effect of %agohover?

Ed Johnson 11 Feb 2010 02:44

I forgot to mention that even though you can't make the hover box follow the mouse, you can change the mouse pointer on hover. See the documentation at W3Schools.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: How to replicate the effect of %agohover?

scottplan 11 Feb 2010 13:18

Thanks Ed! Two outta three — and the cursor tracking was really my third priority.

Having trouble implementing this

Courier Hall 27 Mar 2010 02:32

I'm just a newcomer to all of this, and am trying to implement the hover popup, but can't seem to get it to work by following the instructions outlined above. Instead of showing up when I hover my mouse over the intended text, my popup just appends itself to the end of the intended text, as if the wiki syntax I'm using was invalid. Please help.

Just trying to see if things work here…Why does this work here and not on my page?

I think maybe I'm not importing the CSS correctly? I just copied the code in the box above, like the instructions told me. And obviously, I've figured out how to do the inline hover in THIS comment. Can anybody help?

Re: Having trouble implementing this

James Kanjo 27 Mar 2010 02:36

Hey there!
I'm the guy who created this, so there's no better person to help you :)

Can you show me the page that it's not working on?

Cheers

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: Having trouble implementing this

Courier Hall 27 Mar 2010 03:40

This page is my first try at hovering text.

Re: Having trouble implementing this

Courier Hall 27 Mar 2010 03:43

never mind about my issue. The preview function does not display hovering text. :/ Thanks for the help anyway!

JonathanTheBlack 27 Apr 2010 04:29

This doesn't work in IE 6.0 =(

Inline Hover Tips

RobElliott 27 Apr 2010 07:28

There are a lot of modern styling effects that won't work in an old browser. Many developers now don't try to make sites work in IE6. Unless you are restricted by a company or school system you should consider upgrading to IE8 or switch to Firefox, Chrome. or Safari.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

leiger 27 Apr 2010 07:29

Not many websites support IE 6.0 now anyway - it's too much of a headache. If at all possible you should try to upgrade (or pester those responsible to think about upgrading) — in my opinion.

---

Shane Smith ★ Website: Wikidot Development & Programming.
STE Wikidot Editor: Windows & Mac OS X. ★ Try it for free!.
I'm also on Twitter, follow me there! ;-)

Last edited on 27 Apr 2010 07:29 by leiger + Show more

James Kanjo 27 Apr 2010 10:33

It's true, this doesn't support IE6. When there are free web-browser alternatives that support modern internet standards, there is no reason to continue using IE6.

If you are being held back by a school or company network, consider downloading Portable Google Chrome. This will allow you to run Google Chrome from your USB stick. I recommend Google Chrome because it uses the webkit engine… which, in my experience, is much less buggy than Firefox's rendering engine.

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

RobElliott 27 Apr 2010 10:41

Some organisations I have come across even block USB ports which strikes me as rather paranoid.

I still persist with Portable Firefox due to needing Firebug. But it is certainly more buggy than Portable Chrome.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

rurwin 27 Apr 2010 11:24

You should check the IT policy first. In many cases it will be a severe infringement to execute code from a USB stick, let alone using a browser that is not officially sanctioned.

Mind you, in those cases it will be just as severe to be viewing non-work-related sites such as Wikidot. That is, unless you are developing a Wikidot site for work, in which case the IE6 issue is not soluble unless you can convince the IT department to come out of the dark ages.

---

Copyright waived on Wikidot official and community sites — see profile for details.

Website: www.soronlin.org.uk
Diaspora*: ku.em.ecatstam.dop|nilnoros#ku.em.ecatstam.dop|nilnoros

gerdami 27 Apr 2010 11:35

May be you could hint the CEO to fire the whole IT department …

---

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!

leiger 27 Apr 2010 14:48

James Kanjo: consider downloading Portable Google Chrome

Thanks for the link James. I wasn't aware that there was a portable version of Chrome available — I haven't needed to use Portable Apps for a long time now and hadn't been on the website in a while.

Rob Elliott: Some organisations I have come across even block USB ports which strikes me as rather paranoid.

I did some work experience at a government IT department — they were very strict on taking things home, and bringing things in. Nothing was allowed to leave the building >_>

Although they decided to burn a copy of the work I had done while there to a CD, I got the impression that they wouldn't even normally allow that. USB drives were a big no-go and weren't allowed in the building.

---

Shane Smith ★ Website: Wikidot Development & Programming.
STE Wikidot Editor: Windows & Mac OS X. ★ Try it for free!.
I'm also on Twitter, follow me there! ;-)

How do they do that?

scottplan 19 May 2010 13:50

In admin:manage, under "permissions", there's this new exclamation point after "view".

I appreciate the message, but I'm especially interested in the popup on hover. Looks like jquery to me, but I don't know how to replicate it.

This morning I played with James' hovers to integrate some visible-but-otherwise-innocuous "how-to's". I like the result, but I might like this popup better.

Re: How do they do that?

Ed Johnson 19 May 2010 14:30

I was wondering the same thing when I saw it. It would be nice if the devs would make these features available to us. When they use techniques that are not available through "normal" wiki syntax, it's like teasing us…

I'd still like to see overLIB] support added as part of Wikidot's syntax so it would be easier to use.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: How do they do that?

bcammo 20 May 2010 05:30

I've been fiddling around with a pure CSS popup similar to the new one in the site manager - although I hadn't seen it before. You can see my work in progress here - (best viewed with Safari or Chrome).

---

BMC Creative | RoaringApps | @brycecammo

palantirion 25 Dec 2010 13:34

This does not seem to work for me.

I have an external theme set as /css:mytheme/code/1

and css:mytheme code as:

[[code type="css"]]

@import url(http://static.wikidot.com/v--d5873a42594f/common--theme/co/css/style.css?0);

#header {
background-image: url(/local—files/images/banner.gif);
}
[[module CSS]]
@import url(http://community.wdfiles.com/local--code/howto:inline-hover-tips);
[[/module]]
[[/code]]

and the relevant page info as:

Xy

which simply produces text saying:

Xy

with not so much as underline let alone mouseover text…

What am I doing wrong?

EDIT: if I remove the quotes from this post, it works! But not on my wiki! :(

palantirion 25 Dec 2010 13:35

Sorry, a bit up there got parsed. Here it is raw:

[[span class="hover"]]X[[span]]y[[/span]][[/span]]

page 1 of 212next »