html - 如何在段落中组合工具提示标签和段落边距标签?

标签 html css

<分区>

我在段落中组合工具提示标签和段落边距设置时遇到问题。

这是我目前得到的:

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 1px;
  padding: 1px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

p.ex1 {
  margin-left: 200px; margin-right: 50px;
}
<body style="text-align:center;">
    <font face="Arial" size="4">
        <p class="ex1">
            PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST  
        </p>
        <p class="ex1">
            PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
        </p> 
    </font>
</body>

它显示 3 个段落,就像新段落从工具提示开始一样。

我该怎么做才能将其显示为两个段落?

最佳答案

我认为,您面临的问题是由于 div 元素的显示引起的。将 div 元素替换为 span 元素。问题就会迎刃而解!

我已经编辑了您的代码片段。在这里,

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 1px;
  padding: 1px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

p.ex1 {
  margin-left: 200px; margin-right: 50px;
}
<body style="text-align:center;">
    <font face="Arial" size="4">
        <p class="ex1">
            PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST  
        </p>
        <p class="ex1">
            PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
        </p> 
    </font>
</body>

关于html - 如何在段落中组合工具提示标签和段落边距标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55340561/

上一篇:html - 如何在设计中实现 'cut'?

下一篇:html - 使图像从屏幕外滑入 HTML

相关文章:

javascript - 如何防止页面的 CSS 影响加载 html 文档的 iframe?

html - 具有固定第一行和第一列的可滚动 html 表格,以及表格单元格内的 Angular Material 控件

jquery - Bootstrap 自定义模态效果

php - Wordpress Newspaper 子主题加载 CSS 两次

jquery - 延迟出现在滚动条上

html - 如何在图像上创建图案叠加层

javascript - 无法让内部 div 覆盖外部 div

javascript - 在 html 文档中从 javascript 调用变量

html - 如何在表格中的输入 td 上创建边框?

javascript - 从 Tomcat url 中删除文件夹名称