---
title: "how to create stylish tooltip using css"  
description: "how to create stylish tooltip using css"  
author: "Manoj Bhatt"  
published: 2013-01-25  
updated: 2013-01-28  
canonical: https://www.mindstick.com/forum/544/how-to-create-stylish-tooltip-using-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# how to create stylish tooltip using css

Hi Everyone!\
\
I want to create stylish [tool tip](https://www.mindstick.com/articles/12942/how-to-show-tool-tip-in-html-using-jquery) for my [web](https://www.mindstick.com/articles/12783/the-ultimate-bunch-of-free-web-design-resources) project.\
\
Thanks

## Replies

### Reply by AVADHESH PATEL

Hi Manoj!\
\
You can try below line of code for creating stylish tooltip using CSS\
\

```
<style type="text/css">        a        {            color: #900;            text-decoration: none;        }                a:hover        {            color: red;            position: relative;        }                a[title]:hover:after        {            content: attr(title);            padding: 4px 8px;            color: #333;            position: absolute;            left: 0;            top: 100%;            white-space: nowrap;            z-index: 20px;            -moz-border-radius: 5px;            -webkit-border-radius: 5px;            border-radius: 5px;            -moz-box-shadow: 0px 0px 4px #222;            -webkit-box-shadow: 0px 0px 4px #222;            box-shadow: 0px 0px 4px #222;            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));            background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);            background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);            background-image: -o-linear-gradient(top, #eeeeee, #cccccc);        }    </style>
```

\
apply this css as below\
\

```
<p>ToolTip is used to display some text when the mouse is <a href="#" title="move over"> move over </a> a control. This control is helpful in providing quick information when the user moves the mouse over an associated control.</p>
```


---

Original Source: https://www.mindstick.com/forum/544/how-to-create-stylish-tooltip-using-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.