Hey!

The code i posted removes “title” attribute from A and IMG tagged elements. Lightbox get the title from “title” attribute so that is expected.
Please also see – https://kriesi.at/support/topic/remove-tooltips-title-attributes-from-masonry-gallery/#post-462307

Best regards,
Yigit

Hi!

Note that the code above will remove all title attributes on links and images which is not good for SEO. It’s quite beneficial to keep the title of the images to add more context to the page, you can modify the image title on Media > Library panel. https://www.feedthebot.com/titleandalttags.html

If you’re wondering how to remove those tooltip, unfortunately, that is a default browser feature so we can’t modify it.

Best regards,
Ismael

Hi Sigmund!

Please add following code to Functions.php file in Appearance > Editor

function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_tooltip');

Best regards,
Yigit

Hey!

Please add following code to Quick CSS as well

@media only screen and (max-width: 480px) {
.av-hotspot-fallback-tooltip {
  display: none!important;
}}

Regards,
Yigit

Hey!

Sorry for the late reply, if you reply to your own thread on this forum it will send it to the back of our support queue. Please refrain from doing that unless you think it’s very important.

What changes did you make to the tooltip?

Cheers!
Rikard

Hi chanleo!

Thank you for using Enfold.

Edit config-templatebuilder > avia-shortcodes > logoslider.php, look for this code:

 $output .= "<div {$single_data} class='slide-entry flex_column no_margin {$post_class} {$grid} {$extraClass} {$thumb_class}'>";
                    $output .= !empty($link) ? "<a href='{$link}' data-rel='slide-".avia_partner_logo::$slider."' class='slide-image' title='{$linktitle}' {$blank} >{$img}</a>" : $img;

Replace it with:

  $output .= "<div class='slide-entry flex_column no_margin {$post_class} {$grid} {$extraClass} {$thumb_class}'>";
                    $output .= !empty($link) ? "<a href='{$link}' data-rel='slide-".avia_partner_logo::$slider."' class='slide-image' title='{$linktitle}' {$blank} >{$img}</a>" : $img;
                    $output .= "<div class='custom-tooltip'>{$hover}</div>";

Please create a change log of this modifications in case you update the theme.

Best regards,
Ismael

Hi boscotwcheung!

Thank you for using Enfold.

Add this in the functions.php file:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
	$template_url = get_stylesheet_directory();
    	array_unshift($paths, $template_url.'/shortcodes/');

	return $paths;
}

Create a folder, name it “shortcodes”. Inside the folder create another php file called “product_snippet_custom”. Add this:

<?php
/**
 * Custom product shortcode
 */

if ( !class_exists( 'avia_sc_produc_custom' ) )
{
	class avia_sc_produc_custom extends aviaShortcodeTemplate
	{
			/**
			 * Create the config array for the shortcode custom
			 */
			function shortcode_insert_button()
			{
				$this->config['name']		= __('Product Custom', 'avia_framework' );
				$this->config['tab']		= __('Plugin Additions', 'avia_framework' );
				$this->config['icon']		= AviaBuilder::$path['imagesURL']."sc-button.png";
				$this->config['order']		= 10;
				$this->config['target']		= 'avia-target-insert';
				$this->config['shortcode'] 	= 'av_product_custom';
        $this->config['tooltip'] 	= __('Display a custom info', 'avia_framework' );
        $this->config['drag-level'] = 3;
        $this->config['tinyMCE'] 	= array('disable' => "true");
			}

      /**
  		 * Editor Element - this function defines the visual appearance of an element on the AviaBuilder Canvas
  		 * Most common usage is to define some markup in the $params['innerHtml'] which is then inserted into the drag and drop container
  		 * Less often used: $params['data'] to add data attributes, $params['class'] to modify the className
  		 *
  		 *
  		 * @param array $params this array holds the default values for $content and $args.
  		 * @return $params the return array usually holds an innerHtml key that holds item specific markup.
  		 */
  		function editor_element($params)
  		{
  			$params['innerHtml'] = "<img src='".$this->config['icon']."' title='".$this->config['name']."' />";
  			$params['innerHtml'].= "<div class='avia-element-label'>".$this->config['name']."</div>";
  			$params['content'] 	 = NULL; //remove to allow content elements
  			return $params;
  		}

      function shortcode_handler($atts, $content = "", $shortcodename = "", $meta = "")
      {
      	$output = "";
      	$meta['el_class'];

      	global $woocommerce, $product;
      	if(!is_object($woocommerce) || !is_object($woocommerce->query) || empty($product)) return;

      	// $product = wc_get_product();
      	$output .= "<div class='av-woo-product-info ".$meta['el_class']."'>";
      	ob_start();

      	// Disabled by Alex
      	// $product->list_attributes();

      	// Custom Code by Alex to add more product info data
      	$string_item_code = 'Item-code';
      	if (ICL_LANGUAGE_CODE != 'en'){
      		$string_item_code = '產品編號';
      	}
      	if ($product->sku != ''){
      		echo '<div class="product_sku">'.$string_item_code.': '.$product->sku.'</div>';
      	}
      	if ($product->post->post_title != ''){
      		echo '<div class="product_title">'.$product->post->post_title.'</div>';
      	}

      	if ($product->regular_price != ''){
      		echo '<div class="product_price_row">';
      		$product_o_price = $product->regular_price;
      		$product_s_price = $product->sale_price;
      		$product_symbol = get_woocommerce_currency_symbol();
      		if ($product_symbol == '$'){
      			$product_symbol = 'HKD$';
      		}
      		$product_symbol = 'HKD';
      		if ($product_s_price == ''){ // No Discount
      			if ($product_o_price != ''){
      				echo '<span class="product_price">'.$product_symbol.wc_price($product_o_price).'</span>';
      			}
      		} else {
      			echo '<span class="product_price">'.$product_symbol.wc_price($product_s_price).'</span>';
      			echo '<span class="product_o_price"><del>'.$product_symbol.wc_price($product_o_price).'</del></span>';
      			echo '<span class="product_percent">'.(($product_o_price - $product_s_price) / $product_o_price) * 100 .'% off</span>';
      		}
      		echo '</div>';
      	}
      	// end of custom code by Alex

      	$output .= ob_get_clean();
      	$output .= "</div>";

      	return $output;
      }
	}
}

You will find another element named “Product Custom” in the Plugin Additions panel.

Best regards,
Ismael

Hey jaroljmek!

Please add following code to functions.php file in Appearance > Editor

function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_tooltip');

Regards,
Yigit

Hi!

I checked the first section and the styling reflects the alternate content settings. Alternate content background color is set to #fafafb.

.alternate_color, .alternate_color .site-background, .alternate_color .first-quote, .alternate_color .related_image_wrap, .alternate_color .gravatar img .alternate_color .hr_content, .alternate_color .news-thumb, .alternate_color .post-format-icon, .alternate_color .ajax_controlls a, .alternate_color .tweet-text.avatar_no, .alternate_color .toggler, .alternate_color .toggler.activeTitle:hover, .alternate_color #js_sort_items, .alternate_color.inner-entry, .alternate_color .grid-entry-title, .alternate_color .related-format-icon, .grid-entry .alternate_color .avia-arrow, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery img, .alternate_color .grid-content, .alternate_color .av-share-box ul, #top .alternate_color .av-related-style-full .related-format-icon, .alternate_color .related_posts.av-related-style-full a:hover, .alternate_color.avia-fullwidth-portfolio .pagination .current, .alternate_color.avia-fullwidth-portfolio .pagination a, .alternate_color .av-hotspot-fallback-tooltip-inner, .alternate_color .av-hotspot-fallback-tooltip-count {
  background-color: #fafafb;
  color: #666666;
}

Try to change the color settings to something bright like yellow, violet etc. to see which elements are affected by the current settings.

Best regards,
Ismael

Hi mocablue!

Most likely because of this line:

line-height: .9px!important;

Could you try to remove it?

The “tooltip” is generated from your browser and comes from the title tag of the image, if you want to remove them, please remove the title of the image.

Regards,
Rikard

Hey erikatzen!

Please add following code to Functions.php file in Appearance > Editor

function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_tooltip');

Regards,
Yigit

Hi!

Please try the following in Quick CSS under Enfold–>General Styling:

.avia-search-tooltip {
  left: 70px !important;
}

Best regards,
Rikard

Hi!

You can use this to hide the fallback tooltip:

@media only screen and (max-width: 767px) {
	.av-hotspot-fallback-tooltip {
		display: none !important;
	}
}

Regards,
Ismael