I'm trying to make a graphic design portfolio using a WordPress theme. In it, I have created a tooltip using the Shortcodes Ultimate plugin. It is used to display the designation of a person when hovered on an image. But unfortunately, it is only visible on the live website when the browser tracking protection settings is disabled. what should I do so that the browser does not block it?

The following is the code I'm using to create the tooltip

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

CodePudding user response：

It's likely that the script from the plugin is blocked if it is sourced from a n external source rather than locally. If it is sourced locally, it could be that the plugin has other flags such as naming a file or folder "marketing", for example.

Using WP plugins should be kept to a minimum. The effect you want can be achieved without a plugin using only HTML and CSS.

Here is a rough idea. (also on 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>