Tooltip on div Hover using onmouseover and onmouseout events

Here i am showing you how to create your own style tooltip in jquery. Its very simple to create different type of tooltip by changing it design style. 

Screen 1

Here we are calling a jquery function on hover of div and call another function after hover out to hide that div.
We are using two event to call jquery function:

1. onmouseover
2. onmouseout

OnMouseOver - The onmouseover event fires when the mouse pointer go to the boundaries of the target object.

OnMouseOut - The onmouseout event fires when the mouse pointer leaves the boundaries of the target object. 

Screen 2

CSS:

//CSS for hover div style
<style type="text/css">
        .hoverContiner
        {
            width: 215px;
            height: auto;
            margin-top: 20px;
            position: absolute;
            display: none;
            z-index: 10000;
            font-family: Arial;
        }
        .hoverDivSyle
        {
            float: left;
            width: 11px;
            height: 50px;
            background-image: url('Images/txt-corner.png');
            background-repeat: no-repeat;
            background-position: left 12px;
            position: absolute;
            left: -10px;
        }
        .hoverTextStyle
        {
            float: left;
            width: 180px;
            height: auto;
            background-color: #FFFFFF;
            border: solid 1px #cbcbcb;
            padding: 15px 10px 15px 10px;
            font-family: Arial;
            font-size: 12px;
            color: #222222;
            overflow: hidden;
        }
    </style>

HTML:

<div align="center">
        <h1 style="font-family: Arial; margin-bottom: 80px;">
            Tooltip On div Hover using onmouseover and onmouseout events</h1>
        //Calling function onmouseover and onmouseout
       // HoverDetails is the function which we need to pass current div id and message that you want to display in tooltip
        <div class="QuestionImg" id="divRoleDetails" onmouseover="HoverDetails(this.id,'Lorem ipsum dolor sit amet, cons ectet uer adipiscing elit. Lorem ipsum dolor sit amet, co nsect tuer adipiscing elit.');"
            onmouseout="HideHoverDetails();" style="background-color: rgb(152, 0, 0); height: 30px;
            padding-top: 10px; width: 150px; text-align: center; cursor:pointer; font-family: Arial; color: White;">
            Hover Me
        </div>
        //Hover Details div
        <div id="divHoverDetails" class="hoverContiner">
            <div class="hoverDivSyle">
            </div>
            <div id="divHoverDetailsText" class="hoverTextStyle">
            </div>
        </div>

Script:

you need to add jquery.min file.
Jquery CDN: http://code.jquery.com/jquery-1.10.2.min.js

<script type="text/javascript">

            function HoverDetails(divID, text) {
                debugger;
                var dvMouseover = $('#divHoverDetails');
                var offset = $('#' + divID).offset();
                var leftValue = offset.left;
                var topValue = offset.top;
                dvMouseover.css({ "top": (topValue - 25) + "px" });
                dvMouseover.css({ "left": (leftValue - -158) + "px" });
                $('#divHoverDetailsText').text(text);
                $(dvMouseover).stop().fadeIn(400); //Show tooltip
            }

            function HideHoverDetails() {
                document.getElementById('divHoverDetails').style.display = "none";
  //Hide tooltip            }

        </script>

Download Link:

Download From Here

 If you have any query feel free to comment it will be appreciated :)

ASP.NET Themes, Skin File in ASP.NET

Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. Themes are defined in special directories in our Web site or on our Web server.

A skin file has the file name extension .skin and contains property settings for individual controls such as Button, Label, TextBox, or Calendar controls. Control skin settings are like the control markup itself, but contain only the properties you want to set as part of the theme. For example, the following is a control skin for a Button control:
<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

A theme can also include a cascading style sheet (.css file). When you put a .css file in the theme folder, the style sheet is applied automatically as part of the theme. We define a style sheet using the file name extension .css in the theme folder.
Themes can also include graphics and other resources, such as script files or sound files. For example, part of your page theme might include a skin for a TreeView control. As part of the theme, you can include the graphics used to represent the expand button and the collapse button.
Typically, the resource files for the theme are in the same folder as the skin files for that theme, but they can be elsewhere in the Web application, in a subfolder of the theme folder for example. To refer to a resource file in a subfolder of the theme folder, use a path like the one shown in this Image control skin:
<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />
We can also store your resource files outside the theme folder. If you use the tilde (~) syntax to refer to the resource files, the Web application will automatically find the images. For example, if you place the resources for a theme in a subfolder of your application, you can use paths of the form ~/SubFolder/filename.ext to refer to resource files, as in the following example.
<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

Page Themes

A page theme is a theme folder with control skins, style sheets, graphics files and other resources created as a subfolder of the \App_Themes folder in your Web site. Each theme is a different subfolder of the \App_Themes folder.

Global Themes

A global theme is a theme that we can apply to all the Web sites on a server. Global themes allow you to define an overall look for your domain when you maintain multiple Web sites on the same server.

Global themes are like page themes in that they include property settings, style sheet settings, and graphics. However, global themes are stored in a folder named Themes that is global to the Web server. Any Web site on the server, and any page in any Web site, can reference a global theme.

How to  Apply ASP.NET Themes?

We can apply themes to a page, a Web site, or globally. Setting a theme at the Web site level applies styles and skins to all the pages and controls in the site unless you override a theme for an individual page. Setting a theme at the page level applies styles and skins to that page and all its controls.By default, themes override local control settings.

To apply a theme to a Web site

 

    1. In the application's Web.config file, set the <pages> element to the name of the theme, either a global theme or a page theme, as shown in the following example:

     <configuration>

        <system.web>

           <pages theme="ThemeName" />

        </system.web>

     </configuration> 

  2. To set a theme as a style sheet theme and be subordinated to local control settings), set the styleSheetTheme attribute instead:

        <configuration>

           <system.web>

               <pages styleSheetTheme="Themename" />

           </system.web>

       </configuration> 

A theme setting in the Web.config file applies to all ASP.NET Web pages in that application. Theme settings in the Web.config file follow normal configuration hierarchy conventions. For example, to apply a theme to only a subset of pages, we can put the pages in a folder with their own Web.config file or create a <location> element in the root Web.config file to specify a folder.

To apply a theme to an individual page

 

Set the Theme or StyleSheetTheme attribute of the @ Page directive to the name of the theme to use, as shown in the following example: 

 <%@ Page Theme="ThemeName" %>

<%@ Page StyleSheetTheme="ThemeName" %> 

The theme and its corresponding styles and skins now applies only to the page declaring it.
 

Creating a Theme

 

A theme is a collection of property settings that allow you to define the look of pages and controls. You can apply this look consistently across pages in a Web application. Themes are made up of several elements: server control skins, CSS files, and other resources. In this example, you use a skin and a style sheet to create a theme. 

Themes are defined in special directories in your Web site project.

Steps to To create a theme:

1. In Solution Explorer, right-click the Web site project name, click Add ASP.NET Folder, and then click Theme.

The App_Themes folder is created automatically and a new themes folder named Theme1 is added.

2. Right-click the new Theme1 folder, and click Rename. Type Blue and press ENTER

3. Right-click the new Blue folder, and then click Add New Item.

4. In the Add New Item dialog box, select Skin File and name the file default.skin. Click Add.

5. In Solution Explorer, right-click the new Blue folder again, and then click Add New Item.

6. In the Add New Item dialog box, select Style Sheet. Name the style sheet default.css. Click Add.

The first theme is now created with an empty CSS file and server control skin file. You will edit these files in a moment, but first you need to create a page that contains a control and some HTML that the theme can be applied to. 

If you have any query feel free to comment it will be appreciated :)