Add a pointer arrow to effect Tooltip

Question

Add a pointer arrow to effect Tooltip

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm building a Tooltip effect that displays definitions of specific terms, but I'm having trouble having to add an arrow above the little box. Check out 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

asked by anonymous 22.09.2015 / 15:34

2 answers

1

Simply change this a.tooltip css property:

a.tooltip {
    cursor: pointer;
}

example: link

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

22.09.2015 / 15:44

Pause program with Timer How to make a "submit" in javascript?

score 2 · Accepted Answer

You can use pseudo-element , like before .

link

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;
}