CODEWITHSUNDEEP
htmlcss
adder
adder

Reputation: 3698

Add border to the tooltip as a whole

I am trying to add border to a tooltip so it follows outer lines of the tooltip as a whole. Right now I have managed to only add border to the upper part of the tooltip, which intersects with the arrow part and that's not what I want.

HTML:

<p>Spam</p>
<p>Eggs</p>
<div data-tip="E-mail is only for registration">
    <input type="text" name="test" value="44"/>
</div>

CSS:

[data-tip] {
    position: relative;

}

[data-tip]:before {
    content: '';
    display: none;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid black;
    position: absolute;
    top: -10px;
    left: 15px;
    z-index: 8;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;
}

[data-tip]:after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: -54px;
    left: 0px;
    border: 1px solid red;
    padding: 10px 20px;
    background-color: black;
    color: white;
    z-index: 9;
    font-size: 0.75em;
    height: 4em;
    text-align: center;
    vertical-align: middle;
    line-height: 2em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: normal;
}

[data-tip]:hover:before,
[data-tip]:hover:after {
    display:block;
}

Here is the jsfiddle link.

Upvotes: 0

Views: 177

Answers (1)

symlink
symlink

Reputation: 12208

Since you want to create a border for the triangular piece, create a separate element for it, and use z-indexing to hide the border of the main data-tip element:

[data-tip] {
  position: relative;
}

[data-tip] .triangle {
  display: none;
}

[data-tip] .triangle:after {
  content: '';
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid black;
  position: absolute;
  top: -10px;
  left: 15px;
  z-index: 1;
}

[data-tip] .triangle:before {
  content: '';
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid red;
  position: absolute;
  top: -7px;
  left: 15px;
  z-index: 1;
}

[data-tip]:after {
  display: none;
  content: attr(data-tip);
  position: absolute;
  top: -54px;
  left: 0px;
  border: 2px solid red;
  padding: 10px 20px;
  background-color: black;
  color: white;
  z-index: 0;
  font-size: 0.75em;
  height: 4em;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  box-sizing: border-box;
  white-space: nowrap;
  word-wrap: normal;
}

[data-tip]:hover:before,
[data-tip]:hover:after,
[data-tip]:hover .triangle {
  display: block;
}
<p>Spam</p>
<p>Eggs</p>
<div data-tip="E-mail is only for registration">
  <div class="triangle"></div>
  <input type="text" name="test" value="44" />
</div>

Upvotes: 2

Related Questions