Tooltip/Mouseovers using CSS

Tooltip/Mouseovers using CSS

maltheopia 1245957956|%e %b %Y, %H:%M %Z|agohover

Hello there.

I'm a CSS newbie here and for my wikidot page I want to have a feature so that when I hover over a certain word it'll show a block of text. Apparently it's possible with certain psuedo-classes (esp. hover) to do this, but I have no idea what the syntax is to do it in, either in the editor that wikidot uses or the 'code' function. Heck, I have no idea how to use it—everytime I copy and paste code it just shows the code in pretty colors.

However, there's also a small complication. I am not the admin so I can't edit anything in the stylesheet; everything I use has to fit in the individual page's edit.

Thanks in advance.

Re: Tooltip/Mouseovers using CSS

RobElliott 1245965223|%e %b %Y, %H:%M %Z|agohover

As you are not an admin of your site and therefore have no access to the CSS there is no way to do this that I know of. Even javascript tooltips require some manipulation of the CSS. You should ask to become an admin of the site; then there is scope for doing these tooltips with CSS.

Rob

---

last edited on 1245967046|%e %b %Y, %H:%M %Z|agohover by RobElliott + show more

Re: Tooltip/Mouseovers using CSS

maltheopia 1245967465|%e %b %Y, %H:%M %Z|agohover

I heard that there was some way using iframes to do stuff like javascript and CSS or somesuch?

Re: Tooltip/Mouseovers without using CSS

RobElliott 1246010227|%e %b %Y, %H:%M %Z|agohover

Yes I have found a way of doing this without changing the CSS. You need to upload a small javascript file to your page and then use an html codeblock and iframe combination to show the text and tooltips. The result is shown below. Just hover your mouse over the two paragraphs:

However, it will require you to enter your text inside the codeblock rather than the normal method of entering text straight onto the page. And whenever you enter or change the text you will need to clear your browser cache and refresh the page to see the result.

The javascript file, code and instructions for this are on my page at http://strathviewconsultants.wikidot.com/support:tooltips and if the general view is that this is a useful solution I will add it to the how-to pages.

Rob

---

last edited on 1246011347|%e %b %Y, %H:%M %Z|agohover by RobElliott + show more