Solved

Nice popup window for text...

Posted on 2011-03-07
5
564 Views
Last Modified: 2012-05-11
Hi!

How do i make a popup window for text ?
When user do mouse over, on a text link.
It wil show this popup text in a window with no headers...

0
Comment
Question by:team2005
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 2

Accepted Solution

by:
alagurjan earned 500 total points
ID: 35056824
Hi,

If you want to show a popup window for text, the best way to do this is using css only. Because if you implement using this you don’t want to worry about the browser compatibility.

Using the below code you can easily get it done

<style type="text/css">
.ToolText{position:relative; }
.ToolTextHover{position:relative;}
.ToolText span{display: none;}

.ToolTextHover span{
  display:block;
  position:absolute;
  border:1px solid black;
  top:1.3em;
  left:5px;
  background-color:gray; color:white;
  text-align: center;
}
</style>


<p class="ToolText" onMouseOver="javascript:this.className='ToolTextHover'" onMouseOut="javascript:this.className='ToolText'">

This is the text that will cause the tooltip

<span> And this is the Tooltip's text </span></p>

Enjoy !!


0
 
LVL 2

Author Comment

by:team2005
ID: 35057215
Hi!

Thank you so mutsh... :)

How to align text to the left ?
0
 
LVL 2

Author Closing Comment

by:team2005
ID: 35057281
Nice work :)
0
 
LVL 2

Expert Comment

by:alagurjan
ID: 35058103
Thanks, To align text Left you can use different things in Css Examples Padding-left,margin-right

If you give me the HTML part i can help you
0
 
LVL 2

Author Comment

by:team2005
ID: 35058105
Hi!

One thing that not so good.

When i use this block, the text under the block is showing true the box.
How to set a solid box, that not showing the text under the box ?
0

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question