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

如果来自外部源而非本地，则插件中的脚本很可能被阻止。如果它来源于本地，则可能是插件具有其他标志，例如命名文件或文件夹"；营销"；，例如

应尽量减少使用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>