Results 1 to 2 of 2

Thread: dhtml tool tip position should be bottom side to the icon always?

  1. #1
    Join Date
    Apr 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post dhtml tool tip position should be bottom side to the icon always?

    1) Script Title:
    Position always should be downside,,
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tmltooltip.htm

    3) Describe problem:My requirement is ..as follows. i have one help icon is there . for that one text has to display on mouse over..

    By using above cool tip.. everything is fine,,
    But for IE7 i am facing the problem.. that some text is not displaying it is going under header.. so i would like to show the tool tip text always downside of the icon so that i can see all text..

    see the below figures for more information..my desired goal as in image 2..

    Could any one come up with code... ?

    ThanksInAdvance..

    Madhav

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    The following is a tooltip code which is based YUI developer library.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/fonts/fonts-min.css"> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/reset/reset-min.css">
    
    
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/event/event-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/dom/dom-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/container/container-min.js"></script>
    <style type="text/css">
    .yui-tt {
    	visibility:hidden;
    	position:absolute;
    	color:#333; /*font color of the tooltip*/
    	background-color:#FDFFB4; /*background color of the tooltip*/
    	font-family:arial,helvetica,verdana,sans-serif;
    	padding:2px 5px 2px 2px;
    	border:1px solid #FCC90D; /*border width, style and color of the tooltip*/
    	font:100&#37; sans-serif;
    	width:auto;	/*You can change it to whatever the width you want. Can add the height also if that is a necessity*/
    }
    </style>
    </head>
    
    <body>
    <br>
    <p>
    <a href="http://www.google.com" id="first">Google</a>
    <a href="http://www.yahoo.com" id="second">Yahoo!</a>
    </p>
    <script type="text/javascript">
    	var obj1 = new YAHOO.widget.Tooltip("obj1",{context:"first",text:"World's best search engine"});
    	var obj2 = new YAHOO.widget.Tooltip("obj2",{context:"second",text:"Another useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful siteAnother useful site"});	
    </script>
    </body>
    </html>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •