Solved

Nice popup window for text...

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

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Are there any non javascript based chart/graph solutions? 14 31
Browser Chrome downloads colored link 5 41
HTML5 frame 5 25
add image on html mail 6 19
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
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.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

777 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