ToolTip in your forum


(Marcos P) #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:

    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:

[quote="codinghorror, post:2, topic:45792, full:true"]
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.
[/quote]


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!

(Jeff Atwood) #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.


(Pad Pors) #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?


(Marcos P) #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