Setup a ToolTip in your Forum

documentation theme developers
1

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:

.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:

/* 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:

<div class="tooltip">This is a example
  <span class="tooltiptext">this is a example of tooltip
<img src='//discourselk.s3.amazonaws.com/original/2X/0/0122629c69a65f1dfb54da13120909c542253960.jpg'</img></span>
</div>

This example relates to the image posted above with the image that says love discourse (yes i love)

Example 2:

<div class="tooltip">This is a example
  <span class="tooltiptext">A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element
</span>
</div>

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:

<div class="tooltip">TEXT OF TOOLTIP
  <span class="tooltiptext">Description of Tooltip</span>
</div>

Ok if you want to change where the tooltip will appear, just change the key “.tooltip .tooltiptext” and use the following codes:

Right Tooltip

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

Left Tooltip

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

Top Tooltip

.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

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

NOTICE:

I know that for many this information is very simple, but after suffering with my site 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!

9 Likes
2

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.

8 Likes
3

thanks for the sharing :slight_smile:

question: can one use these tool-tips to make a simple automatic guide-tour in the first time a user is visiting the forum?

1 Like
4

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

1 Like