Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Nice popup window for text...

Posted on 2011-03-07
5
Medium Priority
?
567 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 2000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

604 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