Preface 🎤

The interviewer asked this question during the interview, and the answer was not satisfactory.

implementation

requirements

The content is above the link, rounded, with a small arrow pointing to the link, and the position and content are aligned to the left. Similar to the effect of Baidu Encyclopedia.

The effect picture after implementation:

code

HTML:

<div class='tip' href="#" data-target="I am a small description I am a small description I am a small description I am a small description I am a small description I am a small description I am a small description">
  <a href=The '#'>describe</a>
</div>
Copy the code

CSS:

.tip:hover::after{
  content: ' ';
  width:10px;
  height:10px;
  transform:rotate(45deg);
  position: absolute;
  border:1px solid;
  bottom: 30px;
  border-left:none;
  border-top:none;
  background-color:white;
}
.tip:hover::before{
  content: attr(data-target);
  position:absolute;
  border:1px solid;
  border-radius:5px;
  bottom:35px;
  width:200px;
  overflow:hidden;
  background-color:white;
  box-sizing:border-box;
  padding:10px;
}
.tip:hover{
  position:relative;
}
Copy the code

parsing

.tip:hover{
  position:relative;
}
Copy the code

Since position:absolute is based on the last non-static positioning element. Therefore, the tip element should be set to position:relative, which has no fixed requirements. It can be set in hover or directly set on tip.

// Simplify by removing the appearance and leaving only the core content.tip:hover::before{
  content: attr(data-target);
  position:absolute;
  bottom:35px;
}
Copy the code

Set the content to property content, position to absolute position, and set the distance from the bottom.

.tip:hover::after{
  content: ' ';
  width:10px;
  height:10px;
  transform:rotate(45deg);
  position: absolute;
  border:1px solid;
  bottom: 30px;
  border-left:none;
  border-top:none;
  background-color:white;
}
Copy the code

The contents of this section are used to draw the contents of the triangle by drawing a square, then not drawing the left and top edges, then rotating the elements, and using the same displacement method.

JSFiddle

Preface 🎤

The interviewer asked this question during the interview, and the answer was not satisfactory.

implementation

requirements

The content is above the link, rounded, with a small arrow pointing to the link, and the position and content are aligned to the left. Similar to the effect of Baidu Encyclopedia. PNG %} {% img /images/ CSS-tip-2020-11-28-15-24-34.png %}

code

HTML:

<div class='tip' href="#" data-target="I am a small description I am a small description I am a small description I am a small description I am a small description I am a small description I am a small description">
  <a href=The '#'>describe</a>
</div>
Copy the code

CSS:

.tip:hover::after{
  content: ' ';
  width:10px;
  height:10px;
  transform:rotate(45deg);
  position: absolute;
  border:1px solid;
  bottom: 30px;
  border-left:none;
  border-top:none;
  background-color:white;
}
.tip:hover::before{
  content: attr(data-target);
  position:absolute;
  border:1px solid;
  border-radius:5px;
  bottom:35px;
  width:200px;
  overflow:hidden;
  background-color:white;
  box-sizing:border-box;
  padding:10px;
}
.tip:hover{
  position:relative;
}
Copy the code

parsing

.tip:hover{
  position:relative;
}
Copy the code

Since position:absolute is based on the last non-static positioning element. Therefore, the tip element should be set to position:relative, which has no fixed requirements. It can be set in hover or directly set on tip.

// Simplify by removing the appearance and leaving only the core content.tip:hover::before{
  content: attr(data-target);
  position:absolute;
  bottom:35px;
}
Copy the code

Set the content to property content, position to absolute position, and set the distance from the bottom.

.tip:hover::after{
  content: ' ';
  width:10px;
  height:10px;
  transform:rotate(45deg);
  position: absolute;
  border:1px solid;
  bottom: 30px;
  border-left:none;
  border-top:none;
  background-color:white;
}
Copy the code

The contents of this section are used to draw the contents of the triangle by drawing a square, then not drawing the left and top edges, then rotating the elements, and using the same displacement method.

JSFiddle

Jsfiddle.net/BoxChen/L8r…