Simple Tooltip using CSS in ASP.NET MVC

Simple Tooltip using CSS in ASP.NET MVC:


Simple Tooltip using CSS in ASP.NET MVC: There are lots of JavaScript-based libraries that show Tooltip when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the Tooltip to display HTML content styled with CSS.

But my question, Is there any way to make it possible without using JavaScript.

I am going to create a simple example that will create a Tooltip without using any javascript or jquery library. I have used simple CSS to create a tooltip.

Simple Tooltip using CSS in ASP.NET MVC

Getting Started with the example for Tooltip using CSS:

Create an ASP.NET MVC application with the name TooltipDemo.

Simple Tooltip using CSS in ASP.NET MVC

HTML markup:

Hover me for help!

 <span class="field-tip">
 Mindtrickpages Help
 <span class="tip-content">Mindtrick Tooltip</span>
 </span>

CSS Markup:

Here you can see an External CSS Stylesheet so that you can add some styling to your HTML code as written above in order to show the simple tooltip without using JavaScript on Hover. As above we defined the classfield-tip”  we add some CSS to this class i.e., Position and Cursor CSS Property.

body {

 padding: 30px;
 font: normal 12px/1.5 Arial, sans-serif;
 }

/* Hover tooltips */
 .field-tip {
 position: relative;
 cursor: help;
 }

.field-tip .tip-content {
 position: absolute;
 top: -10px; /* - top padding */
 right: 9999px;
 height100px;
 width: 200px;
 margin-right: -220px; /* width + left/right padding */
 padding: 10px;
 color: #fff;
 background: red;
 -webkit-box-shadow: 2px 2px 5px #aaa;
 -moz-box-shadow: 2px 2px 5px #aaa;
 box-shadow: 2px 2px 5px #aaa;
 opacity: 0;
 -webkit-transition: opacity 250ms ease-out;
 -moz-transition: opacity 250ms ease-out;
 -ms-transition: opacity 250ms ease-out;
 -o-transition: opacity 250ms ease-out;
 transition: opacity 250ms ease-out;
 }
 
 .field-tip .tip-content:before {
 content: ' '; /* Must have content to display */
 position: absolute;
 top: 50%;
 left: -16px; /* 2 x border width */
 width: 0;
 height: 0;
 margin-top: -8px; /* - border width */
 border: 8px solid transparent;
 border-right-color: red;
 }

.field-tip:hover .tip-content {
 right: -20px;
 opacity: 1;
 }

And here is the complete code.

@{
 ViewBag.Title = "Home Page";
 Layout = null;
}
<html>
<head>
 <title>
 Tooltip Demo
 </title>
 <style type="text/css">
 body {
 padding: 30px;
 font: normal 12px/1.5 Arial, sans-serif;
 }

/* Hover tooltips */
 .field-tip {
 position: relative;
 cursor: help;
 }

.field-tip .tip-content {
 position: absolute;
 top: -10px; /* - top padding */
 right: 9999px;
 height100px;
 width: 200px;
 margin-right: -220px; /* width + left/right padding */
 padding: 10px;
 color: #fff;
 background: red;
 -webkit-box-shadow: 2px 2px 5px #aaa;
 -moz-box-shadow: 2px 2px 5px #aaa;
 box-shadow: 2px 2px 5px #aaa;
 opacity: 0;
 -webkit-transition: opacity 250ms ease-out;
 -moz-transition: opacity 250ms ease-out;
 -ms-transition: opacity 250ms ease-out;
 -o-transition: opacity 250ms ease-out;
 transition: opacity 250ms ease-out;
 }
 
 .field-tip .tip-content:before {
 content: ' '; /* Must have content to display */
 position: absolute;
 top: 50%;
 left: -16px; /* 2 x border width */
 width: 0;
 height: 0;
 margin-top: -8px; /* - border width */
 border: 8px solid transparent;
 border-right-color: red;
 }

.field-tip:hover .tip-content {
 right: -20px;
 opacity: 1;
 }
 </style>
</head>
<body>
 <span class="field-tip">
 Mindtrickpages Help
 <span class="tip-content">Mindtrick Tooltip</span>
 </span>


</body>
</html>

Run the application and see the output:

Simple Tooltip using CSS in ASP.NET MVC

Hope you liked this post about Tooltip using CSS in ASP.NET MVC.

Thank You

Leave a Comment