this here is a temporarly remove of the title tag
you must adopt your selector to what you need ! ( var links )

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
    //var links = document.querySelectorAll('a,img,div[title]');
      var links = document.getElementsByTagName("img");
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("org_title", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("org_title");
          };
          link.onclick = function() {
              this.title = this.getAttribute("org_title");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

you see what the code does: it saves the original title to another attribute : org_title
now if the mouse hovers – the title is empty but the original title is saved to another attribute.
if you leave it ( mouseout ) the title is there again.
And on click the title will be there for lightbox captions.
the code above is only for images – but you see the commented line – you can have more selctors here.
you can use the selectors Nikko mentioned above.

See in action here with the enfold tooltip on the images: https://webers-testseite.de/gallery-with-8-images/
normal behavior is here on Gallery with preview ( hove the thumbnails ): https://kriesi.at/themes/enfold-2017/elements/gallery/

there will be both : enfold tooltip and browser tooltip by titles

• This reply was modified 3 years, 6 months ago by Guenni007.

On Enfold Options: Header > Header Style choose: minimal…
i have changed the way of your example page a little bit, because i don’t think it makes sense to paint over the stroke with another ( 2nd child) either.
You can see it here how I implemented it in Enfold. : https://webers-web.info
Basic idea is that there is an omnipresent svg on the page, and this is used for the menu underscore.
To have the svg always available on all pages:
( to child-theme functions.php ):

add_action('ava_after_body_opening_tag', function() {
  echo '<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><path id="line" d="M2 2c49.7 2.6 100 3.1 150 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6" fill="none" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></defs></svg>';
});

and like on the codepen page also in the menu item now set a svg which uses the path of the omnipresent svg:
( under the code above in child-theme functions.php ):

function insert_svg_to_main_navigation() { 
?>
<script>
(function($){
	$('#avia-menu li.menu-item-top-level a' ).prepend('<svg class="button-stroke" viewBox="0 0 154 13"><use href="#line"></use></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_svg_to_main_navigation');

the rest is quick css:

body > #stroke,
#av-burger-menu-ul svg.button-stroke {
	display: none;
}

.button-stroke {
	display: block;
	width: calc(100% - 10px);
	height: 20px;
	position: absolute;
	left: 5px;
	top: calc(50% + 15px);
	stroke-width: 2;
	stroke-dasharray: 650;
	stroke-dashoffset: 650;
}

#avia-menu li.current-menu-item > a .button-stroke {
	stroke-dashoffset: 0;
	stroke: #9b0000;  /*** it is up to you if and what color the active state of the menu-item is set here ***/
}

#avia-menu li.menu-item-top-level a:hover .button-stroke {
	stroke: #07a;  /*** the hover color of the stroke ***/
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-name: draw;
	animation-name: draw;
}

@-webkit-keyframes draw {
	100% {
	  stroke-dashoffset: 0;
	}
}

@keyframes draw {
	100% {
	  stroke-dashoffset: 0;
	}
}

you see some parameters you can play with – f.e. stroke width or colors

___________

with this way you should now be able to – animate your own paths as well.
You need the path

that part in the first code above
<path id=”line” d=”M2 2c49.7 2.6 100 3.1 150 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6″ fill=”none” stroke-linecap=”round” stroke-linejoin=”round” vector-effect=”non-scaling-stroke”/>

you can create it f.e. in Illustrator, and the path length for the stroke-dasharray and stroke-dashoffset. By the way, you can determine the path length in Illustrator by selecting the path, then in the menu item Window – Document information – and then in the “hamburger” select objects. ( you need the value in px not in mm )

no plugin – but you see that on the codepen a hint how you can achieve that.
Guess the inline svg will be nicer / sharper but the gif solution is much easier to understand.

Nikko – I think you misunderstood him. He sets the sizes there for the headings and p-tag, and the settings then in the alb are not taken into account in his opinion.
This:

settings in the text block alb element for the font size only affect the p-tag not the headings used in the text block.
If you got heading alb – they will be overwritten by that inline-style – and the p-tag in the text-block alb will be overwritten too. But headings used in a text-block will have the settings from that options you mentioned above. You only can overwrite those settings inline – by
( click to enlarge )

I always don’t understand why the pages here have to be so secret that you can’t post the example page. It would be much easier to provide a suitable CSS code on the specific case. At least you could provide a similar case in the demo pages, so you know what it’s about.
Sometimes a fellow participant can also give good advice here.
f.e.: https://kriesi.at/themes/enfold-2017/elements/columns/
that code here:

#av_section_4 .flex_column:nth-child(3) {
  position: relative;
  left: -50px;
  top: 30px;
  box-shadow: 2px 2px 5px #333;
  opacity: 0.6;
  background-color: blue !important;
}

provides this result:

Color and transparency are set only to show you the overlap better.

However, it is recommended to set the whole thing only for the non-responsive case:

@media only screen and (min-width:768px) {
  #av_section_4 .flex_column:nth-child(3) {
    position: relative;
    left: -50px;
    top: 30px;
    box-shadow: 2px 2px 5px #333;
    opacity: 0.6;
    background-color: blue !important;
  }
}

by the way that rule seems to come from:

The following CSS codes are created by the YellowPencil plugin.

these vimeo links are for me a bit uncommon to share on public – i do know the normal form with
https://vimeo.com/ID
but your links always do have after an “ID” additonal code – where does it come from ? are these videos not listed ? on vimeo
if i go to your “channel” https://vimeo.com/user4435795 these videos aren’t listed.
https://vimeo.com/372459742/24e815eb45
https://vimeo.com/370990471/6111d085ed

Did you think of the privacy settings on vimeo? there are settings : “Where can this be embedded?”

if it is only a movie presentation with some subtext : Are these movies self-hosted or do they use 3rd-Party hosters like Youtube?
There are some good – even free – plugins to manage that in different options.
The plugin is : Youtube Embed Plus
Check out a friend’s site here: https://kurzundschluss.com/playlist/satelliten/

by the way – if you like to have round checkboxes – just change the value of border-radius to 50% on:
#top .avia_ajax_form .input_checkbox_label:before
but I think it’s better to stay square – because round boxes are commonly used for radio buttons.

if it is a standard checkbox it is not a simple solution on that – because it is depending on browser settings.
( Maybe if you use a plugin on the form – there might be settings on that)
if you realy like to style a checkbox – i guess there will be no otherway to set the genuine checkbox to opacity zero and place f.e. a substitute on the pseudocontainers before or after.
see here an example ( privacy checkboxes ) : https://consulting.webers-testseite.de/kontakt/
see here a codepen: https://codepen.io/jinukurian7/pen/NWPrZqr on how the principal works.

I helped here because it is my nature to help others, even though I did not understand the meaning behind it. A visitor of your site does not expect that a full-width element – in the end even an element covering the whole screen – represents a link. The part is called CTA for a reason. It calls to action. Buttons do this by changing the color or having extra icons on hovering – images by enlarging or casting shadows etc. pp.
Just look at my page again, would you expect to trigger any action by clicking the section? – and that although I thought of setting the hand as a cursor. That’s why it’s still acceptable to use a column as a link element – but the outer enclosing layout element ?

But if you like to have that :
place your color-section ( let content decide the height of that section ) and give a “meaningfull” custom-class to it.
(in my case: full-clickable-image ) –
place an image alb inside with your settings you like – and the link – then:

.avia-section.full-clickable-image .container {
  max-width: 100%;
  padding: 0;
}

.avia-section.full-clickable-image .container .content {
  padding: 0;
}

where is the left icon gone?

try:

.trioDetails {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  margin: 10px 0;
  padding: 0;
}

.trioDetails * {
  margin: 0;
}

can you send me the link to your test page. – Think of – i’m participant as you are – so if you don’t like to make it public – send me an E-Mail ( everything is under my Nick or Avatar )