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

Question

I try to implement a tooltip with picture. That works. But I have 2 problems:

1. If I move mouse over word TooltipText only a dashed line should be displayed. But the word is also underlined (because Link).
2. I would like to disable the link, since it is a tooltip. The CSS attribute 'pointer-events: none;' disables the link, but then the tooltip is not working.

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>

CSS:

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:

https://jsfiddle.net/kdzb108h/

Answer 1

Add this:

 a  {
   text-decoration: none;
 }

text-decoration should be applied directly to <a> , not to its child tags.

Refer to: https://jsfiddle.net/ewtysb4c/

Answer 2

The word is underlined because the <a> tag has a href attribute. If you remove the attribute, both the underline will disappear and the link will be disabled.

However, the cursor will also not behave like a link. You could enforce the text-decoration: none in the <a> tag and add a cursor: pointer to the the a:hover rules. I'd suggest you create an a.tooltip-link class and add these styles to it so they won't be applied to all <a> tags in your page.

Answer 3

1. The .dotted class is being applied to the 'strong' element, this does not have a text-decoration property. You need to apply a class to the 'a href="#"' tag and set the text-decoration: none; on that element.

Answer 4

So, first of all want to explaint few things. You used as container, what's wrong. If you see any year w3.org documentation, you'll see that link is inline document. This link here: https://www.w3.org/TR/html401/struct/global.html#h-7.5.3 says, that inline elements can contain only other inline elements or text. Second thing. I'd rather make the structure next way:

<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> 

Than set div.tooltip-text display:block , and change it by hovering p.tooltip-provoke . By using + in css ('.a + .b') you say to apply styles to first element after element with class="a" and only if it's class="b". You can see example here: https://jsfiddle.net/0pmknx4g/9/