¿Cómo mostrar Tooltip en los controles web con CSS en ASP.NET?

Los tooltips siempre son útiles en una página web, ya que nos permite mostrar información relevante o instrucciones del tipo de dato o la información que un usuario puede capturar en un control web. La información se muestra en forma de mensaje.


 

En este ejemplo te explicare como mostrar tooltips en campos  de texto “TextBox”.

Lo que necesitaremos es una página asp.net “aspx” y tres hojas de estilo css.

Enseguida puedes ver  el código fuente:

HTML

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Tooltip_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="button.css" rel="stylesheet" />
    <link href="table.css" rel="stylesheet" />
    <link href="ToolTip.css" rel="stylesheet" />
    <script type="text/javascript" >
        function showMessage() {
            alert('Se agrego correctamente.');
        }
    </script>    
</head>
<body>
    <form id="form1" runat="server">
        <div id="content">
            <table cellspacing="0">
                <tr>
                    <td colspan="2">
                        <b>Ejemplo Tooltip</b>
                    </td>
                </tr>
                <tr>
                    <td>Nombre:
                    </td>
                    <td>
                        <a href="#" alt="Por favor capture el Nombre" class="tooltipDemo">
                            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>Email:
                    </td>
                    <td>
                        <a href="#" alt="Por favor capture el Email" class="tooltipDemo">
                            <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>Nombre de usuario:
                    </td>
                    <td>
                        <a href="#" alt="Por favor capture el Nombre de Usuario" class="tooltipDemo">
                            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>Password:
                    </td>
                    <td>
                        <a href="#" alt="Por favor capture el Password" class="tooltipDemo">
                            <asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" CssClass="styled-button-8" Text="Enviar" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

CSS tooltip.css

.tooltipDemo {
    position: relative;
    display: inline;
    text-decoration: none;
    left: 5px;
    top: 0px;
}

    .tooltipDemo:hover:before {
        border: solid;
        border-color: transparent #FF8F35;
        border-width: 6px 6px 6px 0px;
        bottom: 21px;
        content: "";
        left: 155px;
        top: 5px;
        position: absolute;
        z-index: 95;
    }

    .tooltipDemo:hover:after {
        background: #FF8F35;
        background: rgb(255, 143, 53);
        border-radius: 5px;
        color: #fff;
        width: 150px;
        left: 160px;
        top: -5px;
        content: attr(alt);
        position: absolute;
        padding: 5px 15px;
        z-index: 95;
    }


.tooltipDemo {
    position: relative;
    display: inline;
    text-decoration: none;
    left: 5px;
    top: 0px;
}

    .tooltipDemo:hover:before {
        border: solid;
        border-color: transparent #FF8F35;
        border-width: 6px 6px 6px 0px;
        bottom: 21px;
        content: "";
        left: 155px;
        top: 5px;
        position: absolute;
        z-index: 95;
    }

    .tooltipDemo:hover:after {
        background: #FF8F35;
        background: rgb(255, 143, 53);
        border-radius: 5px;
        color: #fff;
        width: 150px;
        left: 160px;
        top: -5px;
        content: attr(alt);
        position: absolute;
        padding: 5px 15px;
        z-index: 95;
    }

En la liga de descarga podrás encontrar todas las hojas de estilo.

Por favor, deje sus comentarios, sugerencias y preguntas acerca de este artículo en la sección de comentarios para hacer más rico y útil este artículo. Gracias por leer

Si quieres descargar el ejemplo completo, lo puedes hacer en: https://github.com/jiestrada/tootltip

Artículos relacionados
¿Cuál es el propósito de su sitio web?
¿Cuál es el propósito de su sitio web?

¿Cuál es el propósito de tu página web? Si no

Cómo crear un menú desplegable con jQuery como Facebook y Linkedin en asp.net
Cómo crear un menú desplegable con jQuery como Facebook y Linkedin en asp.net

En este artículo voy a explicar cómo crear un

Sistema para administrador de proyectos
Sistema para administrador de proyectos

Después de un tiempo sin escribir mis amigos e

0 Comentarios
Enviame un comentario