How do I create a simple flyout/mouseover

Hello experts,

I would like to create a simple flyout, or mouseover, without using layers and images. Basically, when a user hovers over some text, or an image, on a page, I would like a small flyout to open with a brief explanation of what they are mousing over. I dont need anything fancy, just text. I've seen this on other pages in the past, but cannot rememver where.

Thanks.
CementTruckAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smaccariCommented:
Maybe this will be enough for what you want?
Simply add some alt and title attribute on a span containing the text you want to mouseover:

<span alt="explanation" title="explanation">some text</span>

If you need something more specific (or event faster to show/hide), you will need to use layers through div elements abolutly positioned.
0
CementTruckAuthor Commented:
smaccari,

Thanks for the quick response.

Unfortunately I cannot seem to get your code to work. Can you show it inline with some other code so I can make sure I am positioning it properly?
0
smaccariCommented:
With this code:

<body>
Here is <span alt="explanation" title="explanation" style="text-decoration:underline">some text</span> on which you can mouseover.
</body>

When you place your cursor on the text "some text", you should see - after let's say half a second - the alt title with "explanation".
(i've added an underline on the text with the "mouseover").
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CementTruckAuthor Commented:
smaccari,

I got it to work. I can use this for something else in the future, but it is not exactly what I had in mind.

I have a table with multiple rows and two columns. Left column shows all the departments in my company, while the right column has one dropdown list for each department. Within the dropdowns are the individuals that work in each department. What I would like to do is have users hover over the name of the department and have a flyout that shows them who is in that department. Once they find the person, they can go to the dropdown and select his name for email, etc. I tried using popups but it's kind of a pain to have to click the "X" when your done looking at the list.

Hope that helps.
0
smaccariCommented:
Well, still with using this alt effect, you could do something like:

<table
<tr>
<td><span onmouseover="this.alt=getPeople('dep1');this.title=getPeople('dep1')">Department 1</span></td>
<td><select name="dep1" id="dep1"><option>Mr Joe</option><option>Mr Black</option></select></td>
</tr>
<tr>
<td><span onmouseover="this.alt=getPeople('dep2');this.title=getPeople('dep2')">Department 2</span></td>
<td><select name="dep2" id="dep2"><option>Mr Yellow</option><option>Mr Brown</option></select></td>
</tr>
</table>

and add this script:

<script>
function getPeople(n)
{
  var sel=document.getElementById("dep"+n);
  var str="";
  for (var i=0;i++;i<sel.options.length) str+=sel.options[i].value+"\\r\\n";
  return str;
}
</script>

You just have to add the ids to your selects (with increments), and the event handler in the span.
0
smaccariCommented:
oops my mistake, change the script by this one:

<script>
function getPeople(id)
{
  var sel=document.getElementById(id);
  var str="";
  for (var i=0; i<sel.options.length; i++) str+=sel.options[i].text+"\r\n";
  return str;
}
</script>
0
CementTruckAuthor Commented:
Hmmmm. I tried this on my existing page, and came up with nothing. I then created a new page with nothing but your code, and although the table appears and the Mr. Black , and mr. yellow drop downs appear and work properly, I cannot get the flyouts to occur. When I hover over the text Department 1 or 2 I watch the bottom left hand side of my browser to see if any changes register, but I see no changes. Me thinks the code may need some tweaking. I tried the original <script> too, but came up with nothing.

Just to double check, the script goes between the <head>  script goes here   </head> tags, right?
0
smaccariCommented:
Ok here is the full page with that simple code:

<html>
<head>
<script>
function getPeople(id)
{
  var sel=document.getElementById(id);
  var str="";
  for (var i=0; i<sel.options.length; i++) str+=sel.options[i].text+"\r\n";
  return str;
}
</script>
</head>
<body>
<table>
<tr>
<td><span onmouseover="this.alt=getPeople('dep1');this.title=getPeople('dep1')">Department 1</span></td>
<td><select name="dep1" id="dep1"><option>Mr Joe</option><option>Mr Black</option></select></td>
</tr>
<tr>
<td><span onmouseover="this.alt=getPeople('dep2');this.title=getPeople('dep2')">Department 2</span></td>
<td><select name="dep2" id="dep2"><option>Mr Yellow</option><option>Mr Brown</option></select></td>
</tr>
</table>
</body>
</html>

While letting the cursor over Department 1 or 2, you should see the alt text.
This text is made dynamically (happy to the getPeople function) by putting in it all options in the associated select box.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CementTruckAuthor Commented:
OK. I had it right. The problem was my setting on IE were set to block active content. That works just fine.

One more thing, can I tweak the settings on this to allow the "flyout" to last a little longer, and to popup a little sooner? If not, no biggie. I just needed to know if that was a possibility. Some of these lists are a little lengthy and I'm not sure that the 3 seconds allotted is fast enough to read all the information.

Thanks for your patience.
0
smaccariCommented:
You have no control on this "effect". It's a built in HTML behavior.
Again, if you want to customize it, you'll have to use some kind of layers - that will make the job a little more complex though, with more javascript involved.
0
CementTruckAuthor Commented:
Yeah, I know. It's a pain to update information, which is why I didn't use it. My predecessor has it on another page in the website, and it's on my list of things to redo as soon as I have some "FREE" time.

Again, thanks for the help and the patience.

Regards.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.