How to make text that appears on hover ON the page

<style type="text/css">
th:after {
	content: '- Hello there!';
	display: none;
}
table:hover th:after {
	display: inline-block;
}
</style>

Change th to the table heading CSS selector to be more specific.

Try something like;

<th tabindex="0">Table Heading <span> - Hello there! </span></th>

th span {
    left: -999em;
    position: absolute;
}

th:hover span,
th:focus span {
    position: static;
}

Then the text will be available for a wider range of people.

Hi I’m little confused. Sorry, I’m kind of a novice. So I created a new page on wordpress to try out your codes. On the “html” tab I tried to put in Samuel’s code, but then it disappeared after I updated it or switched back to the “visual” tab.

I recognize that both your codes (andrew and samuel) uses CSS. I don’t know how to input CSS for a specific page on wordpress.

The table I am using is from a plugin by oscitas called “Easy Bootstrap Shortcode” by oscitas. Here is the shortcode that I am using for my table.

[table width ="100%" style =" table-hover" responsive ="true" class=""]
[table_head]
[th_column]Table Heading[/th_column]
[/table_head]
[table_body]
[table_row]
[row_column]Entry one[/row_column]
[/table_row]
[table_row]
[row_column]Entry two[/row_column]
[/table_row]
[/table_body]
[/table]

How can I incorporate the codes that you posted? Thanks for trying to help by the way, I really appreciate it.

Let’s try to achieve what Andrew suggested as you already have access to table content and this method lets you control the message:

1. Add the little message in the table heading:

[th_column]Table Heading <span> - Hello there! </span>[/th_column]

2. Put this in your custom CSS file (jetpack, .. ) or via this plugin:

th span {
    left: -999em;
    position: absolute;
}

table:hover th span,
table:focus th span {
    position: static;
}

I would have queued that CSS for specific posts containing this table but since it is only couple light lines, you wouldn’t mind having it there all the time queued.

Let us know how it goes.

Hey Samuel, it worked! Thank you very much.

So how would I do the same thing for the rows on the table? So for example this is the original table:

————————————————–
Table Heading
————————————————–
Entry one
————————————————–
Entry two
————————————————–

Then after hovering over the table, the table would look like this:

————————————————–
Table Heading
————————————————–
Entry one – Hello there!
————————————————–
Entry two
————————————————–

I am still using the same shortcodes for the table. Thank you for your time

Hello there.

Glad to hear it worked.

Then after hovering over the table, the table would look like this:

So, the deal is when you mouse over the table, not the row (tr) itself ?

Ok, so as you did with the previous one, contain the same message in the table row:

[row_column]Entry one <span class="hello-there"> - Hello there! </span>[/row_column]

And, update the CSS you added to this:

th span,
table span.hello-there {
    left: -999em;
    position: absolute;
}

table:hover th span,
table:hover span.hello-there {
    position: static;
}

Thank you Samuel ??
Have a nice day

You are welcome!

And have a nice day too ??