Tooltip/Mouseovers using CSS

Tooltip/Mouseovers using CSS

maltheopia 25 Jun 2009 19:25

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 25 Jun 2009 21:27

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

---

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

Last edited on 25 Jun 2009 21:57 by RobElliott + Show more

Re: Tooltip/Mouseovers using CSS

maltheopia 25 Jun 2009 22:04

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 26 Jun 2009 09:57

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

---

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

Last edited on 26 Jun 2009 10:15 by RobElliott + Show more