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

¿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

Compartir

Comentarios (0)

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com