# Setup a ToolTip in your Forum
**URL:** https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792
**Category:** Developers
**Tags:** how-to
**Created:** [June 16, 2016, 11:09pm UTC](https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792 "2016-06-16T23:09:01Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@marcospreviato](https://meta.discourse.org/u/marcospreviato)
#### Post date: [June 16, 2016, 11:09pm UTC](https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792/1 "2016-06-16T23:09:01Z")
Hi, this is my first post sharing a resource to help this wonderful community.
I want to help them create simple forms a tooltip for your forum making it modern and clean, ok lets do it!
First what is tooltip? A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.
Something like this:
First add in your css style:
```plaintext
.posts .topic-body {
overflow: visible;
padding-top: 0px;
padding-left: auto;
padding-right: auto;
box-sizing: border-box;
width: calc(100% - 66px);
background-color: #fff !important;
z-index: auto;
```
After add this:
```plaintext
/* Tooltip Text */
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
width: 350px;
height: auto;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 4;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 4;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
```
Example 1:
```plaintext
```
> This example relates to the image posted above with the image that says love discourse (yes i love)
Example 2:
```plaintext
This is a example
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element
```
> This example relates to the image posted above with text about tooltip
Now let’s make this wonder work!
In your posts includes the following element:
```plaintext
TEXT OF TOOLTIP
Description of Tooltip
```
Ok if you want to change where the tooltip will appear, just change the key “.tooltip .tooltiptext” and use the following codes:
**Right Tooltip**
```plaintext
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
```
**Left Tooltip**
```plaintext
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
```
**Top Tooltip**
```plaintext
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
```
**Bottom Tooltip**
```plaintext
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
```
### NOTICE:
> [@codinghorror](#):
>
> Note that this will not work on tablets or phones, and we generally try to avoid any hover behaviors in Discourse since they don’t scale at all outside desktop / laptop – which is an increasingly small percentage of the online world.
I know that for many this information is very simple, but after suffering with my site [vidadedoteiro.com](http://vidadedoteiro.com), I confess that CSS was never something that I know a lot, but I decided to share with you to help those like me who have suffered from something so simple.
Anyway I apologize if my English is not the best, but I made this topic with love.
Thanks!
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 16, 2016, 11:29pm UTC](https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792/2 "2016-06-16T23:29:18Z")
Note that this will not work on tablets or phones, and we generally try to avoid any hover behaviors in Discourse since they don’t scale at all outside desktop / laptop – which is an increasingly small percentage of the online world.
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [June 17, 2016, 8:35am UTC](https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792/3 "2016-06-17T08:35:35Z")
thanks for the sharing 🙂
question: can one use these tool-tips to make a simple automatic guide-tour in the first time a user is visiting the forum?
---
### Author:  [@marcospreviato](https://meta.discourse.org/u/marcospreviato)
#### Post date: [June 17, 2016, 11:45am UTC](https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792/4 "2016-06-17T11:45:49Z")
i believe its possible, but I think it is not advisable because tooltip works the user to place the mouse over the element, the guest users is more interesting a similar message that appears to the user to register
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [January 12, 2026, 4:59pm UTC](https://meta.discourse.org/t/setup-a-tooltip-in-your-forum/45792/5 "2026-01-12T16:59:30Z")
Or you can use this wonderful theme component…
[https://github.com/Arkshine/discourse-tooltipify-words](https://github.com/Arkshine/discourse-tooltipify-words)
