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

curso programacion, crear pagina web, aprende 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