Tooltips appeared on navigation - not sure how

Dazzling
1

Hi, a strange this has happened and I need some help.

It doesn’t make sense why tooltips now display when I hover over the nav links. I have entered custom css, but nothing related to it that makes sense for tooltips to appear all of a sudden.

My custom CSS is as follows. Coincidentally it started when I inserted `.dropdown-menu .divider’ CSS, but I tried to remove it because I thought this did it and it didn’t help.

The theme was working fine before… I’m puzzled, any input please.

td {padding:0 3px;}
.navbar {padding-top:10px;}
.dropdown-menu .divider {
  background-color: rgba(255, 255, 255, 0.37);
}
.entry-content, .content-area, .amount, p del {
  color:#EAEAEA;
}
.panel {background-color:#000000;}
.woocommerce .quantity input.qty, .woocommerce #content .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce-page #content .quantity input.qty {
  color:#000000;
}
.woocommerce .cart-collaterals .cart_totals table select, .woocommerce-page .cart-collaterals .cart_totals table select {
  color: #000000;
}
.woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select {
  color: #000000;
}
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {
  color: #1FA67A;
}
.woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
  color: #1FA67A;
}
.woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del {
  color: #1FA67A;
}
.woocommerce div.product span.price del, .woocommerce div.product p.price del, .woocommerce #content div.product span.price del, .woocommerce #content div.product p.price del, .woocommerce-page div.product span.price del, .woocommerce-page div.product p.price del, .woocommerce-page #content div.product span.price del, .woocommerce-page #content div.product p.price del {
  color: #1FA67A;
}
button, input, select, textarea {
  color: #000000;
}
.mark, mark {
  color: #ffffff;
  background-color: #000000;
}
2

I need to see your website URL to check what is going on with your menu.

A quick question before. Are you sure that you are not mixing up Title attribute that looks like this:

Title attribute for navigation

With the actual tooltips that looks like this:

Boostap Tooltips for Dazzling theme

To enable second ones you either need a plugin or to write your custom JavaScript that would enable Bootstrap Tooltips but that’s something that’s not there by default and couldn’t happen by accident.

Title attribute is everywhere across the entire website and the web in general. Of course you can get rid of it but it is part of website usability.

3

Hi Aigars, thank you very much for responding, firstly.

You could be right about me mixing the terminology up, as with your example, it looks like “title attributes”.

The website is on my development server at the moment on http://d-base.dyndns.biz/bolus

Strangely and obviously the theme never enabled the nav to display the title attributes, understandably so, as they are untidy in this context.

I can’t see how all of a sudden the title attributes appeared on the navigation. Usually I can determine that it was such and such code etc. that I may have done to cause it, in this case I’m baffled as it appeared out of the blue.

Thank you.

4

Yup, that’s definitely title and it didn’t appear out of blue as it was always there.

You can remove it entirely for menu by editing file called navwalker.php that you can find in Dazzling folder >> inc. You just need to remove or comment out this line:

$atts['title'] = ! empty( $item->title ) ? $item->title : '';

Let me know if this helps.

5

Ok, it is strange to me because I would have noticed them there before, but I most likely didn’t, seeing that it is in the code… anyway, I have changed the code in navwalker.php as you suggested, and it’s working!! Awesome, thank you.

Do I need to create a child-theme due to this? Concerned about future theme updates.

Thank you.

6

To get this to work via Child Theme is is going to be ridiculously difficult for task that just requires to just remove a single line from this Bootstrap navwalker library.

The basic steps would be like this:

  1. Create a child theme
  2. Move nawlaker file to Child Theme folder.
  3. Link it from Child Theme functions.php file.
  4. Create a new classes and functions in navwalker.php because you can’t redeclare them again.
  5. Create a new menu based on existing one but use newly introduced classes from step 4.

There are other ways as well but all of them are on the same level of complexity.

7

Thanks for the steps.

Am I right to assume that future theme updates won’t affect the edit done on the navwalker.php file? If so, I’ll leave the theme as is. This was my only concern.

Thanks.

8

WordPress theme updates during the installation removes the entire theme folder and then adds a new one, so all custom fields that you add there will be lost. It doesn’t matter if this update includes a single edit on style.css, WordPress will still replace everything.

9

Thank you very much Aigars. You’ve been most helpful. A great responsive theme too, well done!