Solved

Nice popup window for text...

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now