Html 从工具提示中删除下划线和链接

我尝试用图片实现工具提示。这很有效。但我有两个问题：

如果将鼠标移到word TooltipText上，则只应显示一条虚线。但这个词也有下划线（因为链接）

我想禁用链接，因为它是一个工具提示。CSS属性“指针事件：无；”禁用链接，但工具提示不起作用

HTML:

<div class="col-lg-4">
    <a href="#">
        <div class="hover-img"><strong class="dotted">TooltipText</strong><span><img src="https://via.placeholder.com/350x150"/></span></div>
    </a>
</div>

a .hover-img {
    position:relative;
}
a .hover-img span {
    position:absolute; left:-9999px; top:-9999px; z-index:9999;
    border: 2px solid #000;

}
a:hover .hover-img span {
    top: 40px;
    left: 0;
}
.dotted {
    color: #4e555b;
    border-bottom: 2px dashed #4e555b;
    text-decoration: none!important;
}
.dotted:hover {
    text-decoration: none!important;
}

JSFiddle:

<div class="col-lg-4">
    <a href="#">
        <div class="hover-img"><strong class="dotted">TooltipText</strong><span><img src="https://via.placeholder.com/350x150"/></span></div>
    </a>
</div>

a .hover-img {
    position:relative;
}
a .hover-img span {
    position:absolute; left:-9999px; top:-9999px; z-index:9999;
    border: 2px solid #000;

}
a:hover .hover-img span {
    top: 40px;
    left: 0;
}
.dotted {
    color: #4e555b;
    border-bottom: 2px dashed #4e555b;
    text-decoration: none!important;
}
.dotted:hover {
    text-decoration: none!important;
}

.dotterd类正在应用于“strong”元素，它没有文本装饰属性。您需要将类应用于'a href=“#”'标记，并设置文本装饰：无；关于那一点

.dotterd类正在应用于“strong”元素，它没有文本装饰属性。您需要将类应用于'a href=“#”'标记，并设置文本装饰：无；关于那一点

添加以下内容：

 a  {
   text-decoration: none;
 }

文本装饰

应直接应用于

添加以下内容：

 a  {
   text-decoration: none;
 }

文本装饰
应直接应用于
该单词带有下划线，因为
标记具有
href
属性。如果删除该属性，下划线将消失，链接将被禁用

但是，光标的行为也不会像链接一样。您可以在
标记中强制执行
文本修饰：none
，并将
光标：指针
添加到
a:hover
规则中。我建议您创建一个
a.tooltip-link
类，并将这些样式添加到该类中，以便它们不会应用于页面中的所有
标记
 该单词加下划线是因为
标记具有
href
属性。如果删除该属性，下划线将消失，链接将被禁用

但是，光标的行为也不会像链接一样。您可以在
标记中强制执行
文本修饰：none
，并将
光标：指针
添加到
a:hover
规则中。我建议您创建一个
a.tooltip-link
类，并将这些样式添加到该类中，以便它们不会应用于页面中的所有
标记
 所以，首先我想解释一些事情。你用它当容器，怎么了。如果您看到任何一年的w3.org文档，您将看到该链接是内联文档。此处的链接：表示内联元素只能包含其他内联元素或文本。
第二件事。我更愿意用下一种方式构建结构：

<div class="wrapper objects">
  <div class="object">
    <p class="tooltip-provoke">Tooltip Text</p>
    <div class="tooltip-text">
      <img src="https://via.placeholder.com/350x150"/>  
    </div>
  </div>
</div> 


工具提示文本


然后设置div.tooltip-text
display:block
，并通过悬停
p.tooltip-increate
进行更改。通过在css（'.a+.b'）中使用+，您可以说使用class=“a”将样式应用于元素后的第一个元素，并且仅当它是class=“b”时。
您可以在这里看到示例：
所以，首先要解释一些事情。你用它当容器，怎么了。如果您看到任何一年的w3.org文档，您将看到该链接是内联文档。此处的链接：表示内联元素只能包含其他内联元素或文本。
第二件事。我更愿意用下一种方式构建结构：

<div class="wrapper objects">
  <div class="object">
    <p class="tooltip-provoke">Tooltip Text</p>
    <div class="tooltip-text">
      <img src="https://via.placeholder.com/350x150"/>  
    </div>
  </div>
</div> 


工具提示文本


然后设置div.tooltip-text
display:block
，并通过悬停
p.tooltip-increate
进行更改。通过在css（'.a+.b'）中使用+，您可以说使用class=“a”将样式应用于元素后的第一个元素，并且仅当它是class=“b”时。
您可以在这里看到示例：