Wordpress 工具提示被浏览器阻止

Question

我正在尝试使用 WordPress 主题制作平面设计作品集。在其中，我使用 Shortcodes Ultimate 插件创建了一个工具提示。它用于在将鼠标悬停在图像上时显示人员的名称。但不幸的是，它只有在禁用浏览器跟踪保护设置的情况下才能在实时网站上看到。我应该怎么做才能让浏览器不阻止它？

以下是我用来创建工具提示的代码

[su_tooltip text="UI designer" font_size="12"]

<figure class="wp-block-image size-full is-resized img-filter parallax-element parallax-wrap">
    <a href="https://www.linkedin.com/in/ashish-yadav/" target="_blank" rel="noopener">
        <img src="https://vedsarkar.com/wp-content/uploads/2019/11/Ashish.png" alt="" class="wp-image-3438" width="55" height="55">
    </a>
</figure>

[/su_tooltip]

Answer 1

如果来自外部源而非本地的插件脚本可能被阻止。如果它来自本地，则可能是该插件具有其他标志，例如将文件或文件夹命名为“marketing”。

应尽量减少使用 WP 插件。不用插件，只用HTML和CSS.

就可以达到你想要的效果

这是一个大概的想法。（也在 CodePen 上）

body {
  font-family: arial;
  padding-top: 20px
}
.thumbnail-container {
  display: flex;
  flex-direction: row;
  margin: 40px auto; 
  justify-content: center;
}
figure img {
  transition: transform 0.05s linear;
  transform: scale(1);
}
figure:hover img {
  transform: scale(1.5);
}

figure > a {
  position: relative; 
  display: block;
}

figure > a:before,
figure > a:after {
   transition: transform, margin 0.05s linear;
  content: " ";
  position: absolute;
  display: block;
  background-color: #222;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: auto;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

figure > a:before {
  content: attr(title);
  min-width: calc(100% + 40px);
  top: -60px;
  color: #fff;
  margin-left: -30px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  z-index: 2;
  white-space: nowrap;
}

figure > a:after {
  transform: rotate(45deg);
  top: -40px;
}


figure > a:hover:before,
figure > a:hover:after {
  opacity: 1;
  margin-top: -5px
}

<div class="thumbnail-container">
  <figure class="wp-block-image size-full is-resized img-filter parallax-element parallax-wrap ">
    <a href="https://www.linkedin.com/in/ashish-yadav/" target="_blank" rel="noopener" title="Some Tooltip">
        <img src="https://vedsarkar.com/wp-content/uploads/2019/11/Ashish.png" alt="" class="wp-image-3438" width="55" height="55">
    </a>
</figure>
<figure class="wp-block-image size-full is-resized img-filter parallax-element parallax-wrap">
    <a href="https://www.linkedin.com/in/ashish-yadav/" title="Other tooltip" target="_blank" rel="noopener">
        <img src="https://vedsarkar.com/wp-content/uploads/2019/11/Ashish.png" alt="" class="wp-image-3438" width="55" height="55">
    </a>
</figure>

<figure class="wp-block-image size-full is-resized img-filter parallax-element parallax-wrap">
    <a href="https://www.linkedin.com/in/ashish-yadav/" target="_blank" rel="noopener" title="Last Tooltip">
        <img src="https://vedsarkar.com/wp-content/uploads/2019/11/Ashish.png" alt="" class="wp-image-3438" width="55" height="55">
    </a>
</figure>


  
</div>

Wordpress 工具提示被浏览器阻止

Wordpress tooltip getting blocked by browsers

html

css

wordpress

shortcode