Add a 'Pointer' arrow in Tooltip effect

Asked

Viewed 759 times

1

I’m building a Tooltip effect that displays the definitions of specific terms, but I’m encountering problems by having to add an arrow above the small box. Check the CSS of the code soon followed by the HTML below:

CSS

a.tooltip {
    position: relative;
    padding: 0;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #133783;
    cursor: help;
    z-index: 25;
}
a.tooltip:hover {
    border: none;
    height: auto;
    background: transparent;
    color: #133783;
    z-index: 25;
}
a.tooltip span {
    display: none
}
a.tooltip:hover span {
    display: block;
    position: absolute;
    width: 290px;
    top: 2em;
    right-align: justify;
    left: 0;
    font: 12px arial, helvetica, sans-serif;
    padding: 5px 10px;
    border: 1px solid #133783;
    background: #E3E3E3;
    color: #000;
    font: 11px arial, verdana, helvetica, sans-serif;
}

HTML

<a href="#" class="tooltip">HTML<span><strong>HTML:</strong> É uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.</a>
html css tooltip

  • I didn’t understand very well what you need. It has how to demonstrate in a simple drawing ?

  • To be more specific, I’ll send an image: (http://i.imgur.com/Hsl44k3.png), check out the arrow above the Tooltip effect, which displays term settings.

2 answers

2


You can use a pseudo-element, like the before.

http://jsfiddle.net/13s7j1kd/2/

a.tooltip {
    position: relative;
    padding: 0;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #133783;
    cursor: help;
    z-index: 25;
}
a.tooltip:hover {
    border: none;
    height: auto;
    background: transparent;
    color: #133783;
    z-index: 25;
}
a.tooltip span {
    visibility: hidden;
    position: absolute;
    width: 290px;
    top: 10em;
    text-align: justify;
    left: 0;
    font: 12px arial, helvetica, sans-serif;
    padding: 5px 10px;
    border: 1px solid #133783;
    background: #E3E3E3;
    color: #000;
    font: 11px arial, verdana, helvetica, sans-serif;
    opacity: 0;
    transition: all 0.3s ease;
}
a.tooltip:hover span {
    visibility: visible;
    opacity: 1;
    top: 3em;
}

a.tooltip span:before{
    content: "";
    position: absolute;
    left: 8px;
    top: -7px;
    width: 15px;
    height: 15px;
    transform: rotateZ(45deg);
    background-color: #E3E3E3;
    border: 1px solid #333;
}

a.tooltip:hover span:before{
    opacity: 1;
    z-index: -1;
}

  • Diego, I can’t thank you enough, the effect is almost complete! But before ending the topic, is it possible to slow down this effect and insert links into the small box? Thanks in advance.

  • How so insert inside ?

  • Diego, insert a linked word within the effect Tooltip, but that would only work if we modify the CSS a little bit. And as far as the effect is concerned slower, how can I do this?

  • I updated the post Bruno. But I still don’t understand the scheme of the word there...

  • 1

    Diego, thank you for the definitive answer. I had forgotten that I could have used the property Transition! Now the code is complete. Hug.

1

Simply change this a.tooltip css property:

a.tooltip {
    cursor: pointer;
}

example: http://jsfiddle.net/ehg8vkj3/

If this is not what you want, please comment before negative.

Browser other questions tagged html css tooltip

You are not signed in. Login or sign up in order to post.