Solved

Nice popup window for text...

Posted on 2011-03-07
5
563 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
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Suggested Solutions

Title # Comments Views Activity
REST endpoint query with a parameter 1 34
Validating Date 4 28
Any Way to rotate banner ads from Commission Junction? 2 36
Html split(text) 2 26
This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

713 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