External links not opening in new tab in ‘tooltip’ hover texts

[ad_1]

I am unable to get external links to open in a image hover tooltip (created using the ‘Happy Addons for Elementor’ advanced tooltip extension).

Here is my technical info:

WP URL: https://nglcommunity.org
WP version: 6.6.2
PHP version: 7.4.33
Active Theme: Bridge Child, version: 1.0.0
Active Plugins:

  • Advanced CSS Editor, version: 3.1
  • Advanced Editor Tools, version: 5.9.2
  • Akismet Anti-spam: Spam Protection, version: 5.3.3
  • Asset CleanUp: Page Speed Booster, version: 1.3.9.7
  • Async JavaScript, version: 2.21.08.31
  • Autoptimize, version: 3.1.12
  • Blackhole for Bad Bots, version: 3.7.1
  • Bridge Core, version: 3.3
  • Classic Editor, version: 1.6.5
  • Code Snippets, version: 3.6.5.1
  • Constant Contact Forms for WordPress, version: 2.6.1
  • Converter for Media, version: 6.1.1
  • Copy & Delete Posts, version: 1.4.9
  • Disable Admin Notices Individually, version: 1.3.5
  • Duplicate Page, version: 4.5.4
  • Elementor, version: 3.24.6
  • Elementor Header & Footer Builder, version: 1.6.42
  • EmbedPress, version: 4.1.0
  • Envato Market, version: 2.0.12
  • Essential Addons for Elementor, version: 6.0.7
  • Exclusive Addons Elementor, version: 2.7.4
  • Fade in fade out post title, version: 11.0
  • Forminator, version: 1.35.1
  • Happy Elementor Addons, version: 3.12.4
  • Health Check & Troubleshooting, version: 1.7.1
  • HT Mega – Absolute Addons for Elementor., version: 2.6.8
  • Image Hover Effects for Elementor with Lightbox and Flipbox, version: 3.0.2
  • Import and export users and customers, version: 1.27.4
  • Jeg Elementor Kit, version: 2.6.9
  • Jetpack, version: 13.9
  • Jetpack Boost, version: 3.5.1
  • Manage User Columns, version: 1.0.5
  • PDF viewer for Elementor, version: 2.9.3
  • Performance Lab, version: 3.4.1
  • Popup Maker, version: 1.20.2
  • Pre* Party Resource Hints, version: 1.8.20
  • Qi Blocks, version: 1.3.3
  • Redirection, version: 5.5.0
  • Regenerate Thumbnails, version: 3.1.6
  • Royal Elementor Addons, version: 1.4.78
  • Safe SVG, version: 2.2.6
  • Security Optimizer, version: 1.5.6
  • Shortcoder, version: 6.4
  • Slider Revolution, version: 6.7.20
  • Smush, version: 3.16.6
  • Speed Optimizer, version: 7.6.7
  • Sticky Menu (or Anything!) on Scroll, version: 2.33
  • The Events Calendar, version: 6.7.0
  • The Events Calendar: Filter Bar, version: 5.5.7
  • The Events Calendar Extension: Temporary fix for datepicker jQuery issue, version: 1.0.0
  • The Events Calendar Pro, version: 7.2.0
  • The Plus Addons for Elementor, version: 5.6.12
  • Ultimate Cursor Addons for Elementor, version: 1.2.0
  • Ultimate Member, version: 2.8.8
  • Update URLs, version: 1.2.10
  • UpdraftPlus – Backup/Restore, version: 1.24.6
  • User Role Editor, version: 4.64.2
  • Wordfence Security, version: 7.11.7
  • WP-Optimize – Clean, Compress, Cache, version: 3.6.0
  • WPCode Lite, version: 2.2.2
  • WP Crontrol, version: 1.17.0
  • WP Custom Admin Interface, version: 7.37
  • wpDataTables – Tables & Table Charts, version: 3.4.2.27
  • wpDataTables integration for Forminator Forms, version: 1.3.2
  • WP External Links, version: 2.61
  • WP Mail SMTP, version: 4.1.1
  • Wp Maximum Upload File Size, version: 1.1.2
  • WP Sheet Editor – Events, version: 1.1.32
  • XML Sitemap Generator for Google, version: 4.1.21
  • Yoast SEO, version: 23.6

WPEL Settings:
array(
‘wpel-external-link-settings’ => array (
‘apply_settings’ => ‘1’,
‘target’ => ‘_blank’,
‘target_overwrite’ => ‘1’,
‘rel_follow’ => ‘nofollow’,
‘rel_follow_overwrite’ => ‘1’,
‘rel_noopener’ => ‘1’,
‘rel_noreferrer’ => ‘1’,
‘rel_external’ => ‘1’,
‘rel_sponsored’ => ”,
‘rel_ugc’ => ”,
‘title’ => ‘title’,
‘class’ => ‘Advanced_Tooltip’,
‘icon_type’ => ”,
‘icon_image’ => ‘1’,
‘icon_dashicon’ => ‘dashicons-menu’,
‘icon_fontawesome’ => ‘fa-address-book’,
‘icon_position’ => ‘right’,
‘no_icon_for_img’ => ‘1’,
),
‘wpel-internal-link-settings’ => array (
‘apply_settings’ => ”,
‘target’ => ”,
‘target_overwrite’ => ”,
‘rel_follow’ => ”,
‘rel_follow_overwrite’ => ”,
‘rel_noopener’ => ‘1’,
‘rel_noreferrer’ => ‘1’,
‘title’ => ‘title’,
‘class’ => ”,
‘icon_type’ => ”,
‘icon_image’ => ‘1’,
‘icon_dashicon’ => ”,
‘icon_fontawesome’ => ”,
‘icon_position’ => ‘right’,
‘no_icon_for_img’ => ‘1’,
),
‘wpel-excluded-link-settings’ => array (
‘apply_settings’ => ”,
‘target’ => ”,
‘target_overwrite’ => ”,
‘rel_follow’ => ”,
‘rel_follow_overwrite’ => ”,
‘rel_noopener’ => ‘1’,
‘rel_noreferrer’ => ‘1’,
‘title’ => ‘title’,
‘class’ => ”,
‘icon_type’ => ”,
‘icon_image’ => ‘1’,
‘icon_dashicon’ => ”,
‘icon_fontawesome’ => ”,
‘icon_position’ => ‘right’,
‘no_icon_for_img’ => ‘1’,
),
‘wpel-exceptions-settings’ => array (
‘apply_all’ => ‘1’,
‘apply_post_content’ => ‘1’,
‘apply_comments’ => ‘1’,
‘apply_widgets’ => ‘1’,
‘skip_post_ids’ => ”,
‘ignore_classes’ => ”,
‘subdomains_as_internal_links’ => ”,
‘include_urls’ => ‘https://sites.google.com/nglcommunity.org/, https://thefearlessheart.org/’,
‘exclude_urls’ => ”,
‘excludes_as_internal_links’ => ”,
‘ignore_script_tags’ => ‘1’,
‘ignore_mailto_links’ => ‘1’,
),
‘wpel-exit-confirmation-settings’ => array (
‘exit_preview’ => ”,
‘background’ => ‘#FFFFFF’,
‘title’ => ‘You are leaving our website’,
‘title_color’ => ‘#FFF’,
‘title_background’ => ‘#999’,
‘title_size’ => ’18’,
‘text’ => ‘This link leads outside our website and we are not responsible for its content. If you still want to visit the link, click here:’,
‘text_color’ => ‘#444’,
‘text_size’ => ’14’,
‘popup_width’ => ‘400’,
‘popup_height’ => ‘200’,
‘overlay’ => ‘1’,
‘overlay_color’ => ‘#000’,
‘button_text’ => ‘Stay on the site’,
‘button_size’ => ’14’,
‘button_color’ => ‘#FFF’,
‘button_background’ => ‘#1e73be’,
),
);

In addition to using the plugin settings, I’ve also tried the following html code:

<a href="https://www.thefearlessheart.org" target="_blank" rel="noopener noreferrer" data-wpel-link="external">here</a> to go to The Fearless Heart website.</span>

And also tried to use the ‘Advanced_Tooltip’ class too and to specifiy the external url links.

And have tried the following JS code in the footer:

//<![CDATA[
jQuery(document).ready(function($) 
$('a').each(function() 
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) 
$(this).click(function(event) 
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
);

);
);
//]]>

and the following php snippet in the footer:

add_filter( 'the_content', function ( $content ) 
// This snippet requires the DOMDocument class to be available.
if ( ! class_exists( 'DOMDocument' ) ) 
return $content;

if ( !is_single()  );

I contacted the plugin author as so far they are unable to provide any solutions, citing that:

“I’m afraid, Happy Tooltip extension is not allowing this behavior, it might be due to limitations in how the extension renders the HTML or security restrictions imposed upon it.”

Is there anything you can suggest as a solution?

In case it’s useful, here is the ‘advanced-tooltip.php’ extension script:

<?php
namespace Happy_Addons\Elementor\Extension;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Background;
use \Elementor\Group_Control_Border;
defined('ABSPATH') || die();
class Advanced_Tooltip 
static $should_script_enqueue = false;
public static function init() 
add_action('elementor/element/common/_section_style/after_section_end', [__CLASS__, 'add_controls_section'], 1);
add_action('elementor/frontend/widget/before_render', [__CLASS__, 'should_script_enqueue']);
add_action('elementor/preview/enqueue_scripts', [__CLASS__, 'enqueue_scripts']);
public static function enqueue_scripts() 
$suffix = ha_is_script_debug_enabled() ? '.' : '.min.';
$extension_js = HAPPY_ADDONS_DIR_PATH . 'assets/js/extension-advanced-tooltip' . $suffix . 'js';
if (file_exists($extension_js)) 
wp_add_inline_script(
'elementor-frontend',
file_get_contents($extension_js)
);

/**
* Set should_script_enqueue based extension settings
*
* @param Element_Base $section
* @return void
*/
public static function should_script_enqueue($section) 
if (self::$should_script_enqueue) 
return;
if ('enable' == $section->get_settings_for_display('ha_advanced_tooltip_enable')) 
self::$should_script_enqueue = true;
self::enqueue_scripts();
remove_action('elementor/frontend/section/before_render', [__CLASS__, 'should_script_enqueue']);

public static function add_controls_section($element) 
$element->start_controls_section(
'_section_ha_advanced_tooltip',
[
'label' => __('Happy Tooltip', 'happy-elementor-addons') . ha_get_section_icon(),
'tab'   => Controls_Manager::TAB_ADVANCED,
]
);
$element->add_control(
'ha_advanced_tooltip_enable',
[
'label'       => __('Enable Happy Tooltip?', 'happy-elementor-addons'),
'type'        => Controls_Manager::SWITCHER,
'label_on' => __('On', 'happy-elementor-addons'),
'label_off' => __('Off', 'happy-elementor-addons'),
'return_value' => 'enable',
'prefix_class' => 'ha-advanced-tooltip-',
'default' => '',
'frontend_available' => true,
]
);
$element->start_controls_tabs('ha_tooltip_tabs');
$element->start_controls_tab('ha_tooltip_settings', [
'label' => __('Settings', 'happy-elementor-addons'),
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]);
$element->add_control(
'ha_advanced_tooltip_content',
[
'label' => __('Content', 'happy-elementor-addons'),
'type'      => Controls_Manager::TEXTAREA,
'description' => ha_get_allowed_html_desc('intermediate'),
'rows' => 5,
'default' => __('I am a tooltip', 'happy-elementor-addons'),
'dynamic' => ['active' => true],
'frontend_available' => true,
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_responsive_control(
'ha_advanced_tooltip_position',
[
'label' => __('Position', 'happy-elementor-addons'),
'type' => Controls_Manager::SELECT,
'default' => 'top',
'options' => [
'top' => __('Top', 'happy-elementor-addons'),
'bottom' => __('Bottom', 'happy-elementor-addons'),
'left' => __('Left', 'happy-elementor-addons'),
'right' => __('Right', 'happy-elementor-addons'),
],
'frontend_available' => true,
'prefix_class' => 'ha-advanced-tooltip%s-',
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_control(
'ha_advanced_tooltip_animation',
[
'label' => __('Animation', 'happy-elementor-addons'),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'' => __('None', 'happy-elementor-addons'),
'ha_fadeIn' => __('fadeIn', 'happy-elementor-addons'),
'ha_zoomIn' => __('zoomIn', 'happy-elementor-addons'),
'ha_rollIn' => __('rollIn', 'happy-elementor-addons'),
'ha_bounce' => __('bounce', 'happy-elementor-addons'),
'ha_slideInDown' => __('slideInDown', 'happy-elementor-addons'),
'ha_slideInLeft' => __('slideInLeft', 'happy-elementor-addons'),
'ha_slideInRight' => __('slideInRight', 'happy-elementor-addons'),
'ha_slideInUp' => __('slideInUp', 'happy-elementor-addons'),
],
'frontend_available' => true,
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_control(
'ha_advanced_tooltip_duration',
[
'label' => __('Animation Duration (ms)', 'happy-elementor-addons'),
'type' => Controls_Manager::NUMBER,
'min' => 100,
'max' => 5000,
'step' => 50,
'default' => 1000,
'frontend_available' => true,
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_control(
'ha_advanced_tooltip_arrow',
[
'label' => __('Arrow', 'happy-elementor-addons'),
'type' => Controls_Manager::SWITCHER,
'label_on' => __('Show', 'happy-elementor-addons'),
'label_off' => __('Hide', 'happy-elementor-addons'),
'return_value' => 'true',
'default' => 'true',
'frontend_available' => true,
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_control(
'ha_advanced_tooltip_arrow_notice',
[
'raw' => '<strong>' . esc_html__('Please note!', 'happy-elementor-addons') . '</strong> ' . esc_html__('By toggling Arrow to "HIDE" you get access to more background control.', 'happy-elementor-addons'),
'type' => Controls_Manager::RAW_HTML,
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
'render_type' => 'ui',
'condition' => [
'ha_advanced_tooltip_enable!' => '',
'ha_advanced_tooltip_arrow' => 'true',
],
]
);
$element->add_control(
'ha_advanced_tooltip_trigger',
[
'label' => __('Trigger', 'happy-elementor-addons'),
'type' => Controls_Manager::SELECT,
'default' => 'hover',
'options' => [
'click' => __('Click', 'happy-elementor-addons'),
'hover' => __('Hover', 'happy-elementor-addons'),
],
'frontend_available' => true,
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_responsive_control(
'ha_advanced_tooltip_distance',
[
'label' => __('Distance', 'happy-elementor-addons'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => '0',
],
'range' => [
'px' => [
'min' => -100,
'max' => 500,
],
],
'selectors' => [
'WRAPPER.ha-advanced-tooltip-enable .ha-advanced-tooltip-content' => '--ha-tooltip-arrow-distance: SIZEUNIT;',
// 'WRAPPER.ha-advanced-tooltip-enable .ha-advanced-tooltip-content' => '--ha-tooltip-arrow-distance: SIZEUNIT;',
// 'WRAPPER.ha-advanced-tooltip-enable .ha-advanced-tooltip-content' => '--ha-tooltip-arrow-distance: SIZEUNIT;',
// 'WRAPPER.ha-advanced-tooltip-enable .ha-advanced-tooltip-content' => '--ha-tooltip-arrow-distance: SIZEUNIT;',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_responsive_control(
'ha_advanced_tooltip_align',
[
'label' => __('Text Alignment', 'happy-elementor-addons'),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __('Left', 'happy-elementor-addons'),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => __('Center', 'happy-elementor-addons'),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => __('Right', 'happy-elementor-addons'),
'icon' => 'eicon-text-align-right',
],
],
'default' => 'center',
'toggle' => true,
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content' => 'text-align: VALUE;'
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->end_controls_tab();
$element->start_controls_tab('ha_advanced_tooltip_styles', [
'label' => __('Styles', 'happy-elementor-addons'),
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]);
$element->add_responsive_control(
'ha_advanced_tooltip_width',
[
'label' => __('Width', 'happy-elementor-addons'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => '120',
],
'range' => [
'px' => [
'min' => 1,
'max' => 800,
],
],
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content' => 'width: SIZEUNIT;',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_responsive_control(
'ha_advanced_tooltip_arrow_size',
[
'label' => __('Tooltip Arrow Size (px)', 'happy-elementor-addons'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => '5',
],
'range' => [
'px' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content::after' => 'border-width: SIZEUNIT;',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
'ha_advanced_tooltip_arrow' => 'true',
],
]
);
$element->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ha_advanced_tooltip_typography',
'separator' => 'after',
'fields_options' => [
'typography' => [
'default' => 'yes'
],
'font_family' => [
'default' => 'Nunito',
],
'font_weight' => [
'default' => '500', // 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold
],
'font_size' => [
'default' => [
'unit' => 'px', // px, em, rem, vh
'size' => '14', // any number
],
],
],
'selector' => 'WRAPPER .ha-advanced-tooltip-content',
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_group_control(
Group_Control_Background::get_type(),
[
'name'     => 'ha_advanced_tooltip_title_section_bg_color',
'label'    => __('Background', 'happy-elementor-addons'),
'types'    => ['classic', 'gradient'],
'selector' => 'WRAPPER .ha-advanced-tooltip-content',
'condition' => [
'ha_advanced_tooltip_enable!' => '',
'ha_advanced_tooltip_arrow!' => 'true',
],
]
);
$element->add_control(
'ha_advanced_tooltip_background_color',
[
'label' => __('Background Color', 'happy-elementor-addons'),
'type' => Controls_Manager::COLOR,
'default' => '#000000',
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content' => 'background: VALUE;',
'WRAPPER .ha-advanced-tooltip-content::after' => '--ha-tooltip-arrow-color: VALUE',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
'ha_advanced_tooltip_arrow' => 'true',
],
]
);
$element->add_control(
'ha_advanced_tooltip_color',
[
'label' => __('Text Color', 'happy-elementor-addons'),
'type' => Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content' => 'color: VALUE;',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ha_advanced_tooltip_border',
'label' => __('Border', 'happy-elementor-addons'),
'selector' => 'WRAPPER .ha-advanced-tooltip-content',
'condition' => [
'ha_advanced_tooltip_enable!' => '',
'ha_advanced_tooltip_arrow!' => 'true',
],
]
);
$element->add_responsive_control(
'ha_advanced_tooltip_border_radius',
[
'label' => __('Border Radius', 'happy-elementor-addons'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content' => 'border-radius: TOPUNIT RIGHTUNIT BOTTOMUNIT LEFTUNIT;',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_responsive_control(
'ha_advanced_tooltip_padding',
[
'label' => __('Padding', 'happy-elementor-addons'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'WRAPPER .ha-advanced-tooltip-content' => 'padding: TOPUNIT RIGHTUNIT BOTTOMUNIT LEFTUNIT;',
],
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ha_advanced_tooltip_box_shadow',
'selector' => 'WRAPPER .ha-advanced-tooltip-content',
'separator' => '',
'condition' => [
'ha_advanced_tooltip_enable!' => '',
],
]
);
$element->end_controls_tab();
$element->end_controls_tabs();
$element->end_controls_section();

Advanced_Tooltip::init();

Thank you kindly in advance for your consideration 🙂

The page I need help with: [log in to see the link]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer