Hovertext formatting

Summary:

I'd like to include hover text as an element, but don't like the yellow background. Suggestions?

Hovertext formatting

Rounzie 20 Jun 2015 19:39

Salutations, I want to use hover text as an element in an article, and am having some trouble finding a way to create hover text that I can change the background color, style etc. on. I've been googling around, but don't know any programming languages so what I've found has been a combination of didn't work and/or I didn't understand. Ideally I'd like it to look like the footnotes or hovers that come up at the bottom of the wiki. Does anyone have any advice?

Last edited on 20 Jun 2015 20:19 by Rounzie Show more

Re: Hovertext formatting

LurkD 21 Jun 2015 13:21

Yes, this is possible.

Enter the following code at the top of your article, this will not be displayed once it compiles but it's necessary for it to work. This was copied from one of my pieces, so you can adjust the variables however way you want:

[[module css]]
.hover {
}
.hover:hover {
     text-decoration: none;
    border-bottom: none;
}

.hover span {    display: none;}
.hover:hover span {
    position: absolute;
    display: inline;
    margin: auto;
    height: auto;
    width: auto;
    background: #FFF;
    border: 2px solid #34B;
    color: #000;
    padding: 1em;
}
.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
[[/module]]

A coupe of things though. You'll notice some variables that can be changed in the CSS. Look at this list to know what each means:

• POSITION: Best not to mess with this.
• DISPLAY: This changes the element. For most purposes inline is fine.
• MARGIN: This changes where in relation to the text where the hover box will appear. You can fool around with this to position the box in a specific place. For instance, if you want the box to appear below the text without blocking it, you can set it to margin: 20px 0px;
• HEIGHT AND WIDTH: If you want set values for either of these. Otherwise keep it on auto.
• BACKGROUND: Hex color setting.
• BORDER: Thickness and hex color setting.
• COLOR: Hex color setting of text in hover box.
• PADDING: The amount of space between the hover box border and hover text. You want a minimal amount of padding at the very least.

.hover:hover span span you shouldn't really mess with unless you know what you are doing or need something very specific because this defines the span class that you are going to use.

To apply the hover text in the document, refer to the following code to be placed where you want it:

[[span class="hover"]] [[span]] HOVER TEXT HERE! [[/span]] TEXT THAT IS DISPLAYED! [[/span]]

Re: Hovertext formatting

Rounzie 22 Jun 2015 00:58

This is exactly what I was looking for thanks! Very very much obliged!