Can't make a css triangle for tooltip

1.8k Views Asked by Ali Nouman At 20 November 2018 at 05:26

I'm not able to make tooltip-arrow similar to this

Removing arrowTransform:"scale(2)" also doesn't help. Something I'm missing in css. Here is the pen

There are 1 best solutions below

RGhanbari On 20 November 2018 at 07:27

.arrow_box {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.arrow_box .arrow_boxtext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.arrow_box .arrow_boxtext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.arrow_box:hover .arrow_boxtext {
    visibility: visible;
    opacity: 1;
}

<!DOCTYPE html>
<html>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="arrow_box">Hover over me
  <span class="arrow_boxtext">your text is here</span>
</div>

</body>
</html>

DEMO to see other positions.

.arrow_box {
 position: relative;
 background: #ffffff;
 border: 1px solid #bebebe;
  display:inline-block;
  padding:5px;
}
.arrow_box:after, .arrow_box:before {
 top: 100%;
 left: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.arrow_box:after {
 border-color: rgba(255, 255, 255, 0);
 border-top-color: #ffffff;
 border-width: 7px;
 margin-left: -7px;
}
.arrow_box:before {
 border-color: rgba(190, 190, 190, 0);
 border-top-color: #bebebe;
 border-width: 8px;
 margin-left: -8px;
}

<html>
<body>
<div class="arrow_box">
  <span>your text is here</span>
</div>
</body>
<html>

Can't make a css triangle for tooltip

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in TIPPYJS

Trending Questions

Popular # Hahtags

Popular Questions