Question

在HTML中，如果我们需要将鼠标悬停在文本上方来显示文本，那么应该使用它的Css。这是需要完成的任务，类似于给定的图像。 Sample of task that needs to be done

<mat-expansion-panel-header [collapsedHeight]="'40px'" [expandedHeight]="'40px'"
                                style="margin-left: 50px;border-bottom: 1px solid #4c4c4c;">
                                <mat-panel-title
                                    style="text-decoration: none;color: #FFFFFF;font-size: 15px;font-family: sans-serif;font-weight: 700;width: 209px;overflow: hidden;text-overflow: ellipsis; word-break: break-all;white-space: nowrap;"
                                    >
                                    {{category.CategoryName}}
                                </mat-panel-title>
                                <mat-panel-description *ngIf="!category.Expanded"
                                    style="margin-left: -4px;margin-right: -6px;">
                                    <mat-icon style="color: #FFFFFF;">keyboard_arrow_down</mat-icon>
                                </mat-panel-description>
                                <mat-panel-description *ngIf="category.Expanded"
                                    style="margin-left: -4px;margin-right: -6px;">
                                    <mat-icon style="color: #FFFFFF;">keyboard_arrow_up</mat-icon>
                                </mat-panel-description>
                            </mat-expansion-panel-header>

Answer 1

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me toolTip using Css
  <span class="tooltiptext">Tooltip text</span>
</div>

<p title="someText">This is a paragraph with Tooltip set using Title attribute.</p>

</body>
</html>

可以使用两种不同的方式创建“工具提示”

通过CSS
使用名为title的属性。

以上示例将向您展示用法，并提供更多详细信息和自定义信息，您可以访问here。

Answer 2

希望这对您有所帮助。谢谢

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip button:hover+.tooltiptext {
  visibility: visible;
}

<div class="tooltip"> <button>Tooltip Button</button>
  <span class="tooltiptext">Tooltip text</span>
</div>

Answer 3

请选中此

  	.hoverer {
	position: relative;
	margin-top: 30px;
}
.hoverer:hover::after {
	content: attr(hover-text);
	position: absolute;
	top: -25px;
	left: 0;
	font-size: 13px;
	border: 1px solid #333333;
	padding: 2px 5px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #effdfe, #a2ecf5);
}

<p class="hoverer" hover-text="hello i am hovered text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab a sint cumque, minus impedit. Earum, debitis quidem natus dolores aliquid libero ipsum doloremque eum repellendus voluptate blanditiis, omnis molestias cumque!
	</p>

将鼠标悬停在文本上时更改带有文本的指针

3 个答案: