-->
Welcome, Guest
Username: Password: Remember me
You can also tweak your setup of Dolibarr by setting hidden configurations found in Dolibarr Setup Other

Poll: Is This Useful?

Yes 1 100%
No No votes 0%
Total number of voters: 1 ( aljawaid )
Only registered users can participate to this poll

TOPIC: Better Tooltips

Better Tooltips 5 months 1 week ago #35506

  • aljawaid
  • aljawaid's Avatar
  • OFFLINE
  • Moderator
  • Learning to be open, one source at a time.
  • Posts: 726
  • Thank you received: 116
  • Karma: 13
Better Tooltips

WARNING:
This information and code is presented to you in good faith. Using parts of this code or file is at your own risk. Amending code your code using the method below will enable the feature only in the current version that you are using. If you upgrade your Dolibarr version, then this code will be automatically erased (and the feature will be removed). Unless the feature below has been included in the core, you would need to apply this code again in your new version. Always backup the files mentioned before manually changing any code.


Tested on: 7.0.4


What this does
In recent versions of Dolibarr (maybe from around v6), the tooltips around the interface have removed to a bettter style and design. The suggested code in this post just improves on that and if applied, give you a different look and feel to your interface. This only applies to the default 'edly' theme.


Changes from the default tooltips
  • Derived from the default tooltip fields with `classfortooltip` css class
  • Rounded borders for tooltip and contained images
  • Centered contained images
  • Slim black thin left bar to simulate tooltip as a badge or band
  • Black text, even on links (as links are currently unclickable in the tooltip core)


Examples

tooltip-contact.png
tooltip-docs.png
tooltip-logout.png


tooltip-print.png
tooltip-product.png
tooltip-product2.png


tooltip-thirdparty.png
tooltip-user.png



How to do it:

In file:
/theme/eldy/style.css.php

Replace section: (around line 3403)
.mytooltip {
	border-top: solid 1px #BBBBBB;
	border-<?php print $left; ?>: solid 1px #BBBBBB;
	border-<?php print $right; ?>: solid 1px #444444;
	border-bottom: solid 1px #444444;
	padding: 5px 20px;
	border-radius: 0;
	box-shadow: 0 0 4px grey;
	margin: 2px;
	font-stretch: condensed;

With:
/* BLACK TOOLTIP */
.ui-tooltip {
	border-top: solid 1px #000 !important;
	border-left: solid 10px #000 !important;
	border-right: solid 1px #000 !important;
	border-bottom: solid 1px #000 !important;
	padding: 5px 10px !important;
	color: #000 !important;
	border-radius: 3px !important;
	box-shadow: 0 0 3px #000 !important;
	margin: 2px !important;
}
 
/* BLACK TOOLTIP - BLACK TEXT */
.ui-tooltip-content {
	color: #000!important;
	border-radius: 3px !important;
}
 
/* BLACK TOOLTIP - IMAGE */
.ui-tooltip-content img {
	border-radius: 3px !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 
/* BLACK TOOLTIP - LINK IS NOT CLICKABLE SO NO NEED FOR DIFFERENT COLOR */
.ui-tooltip-content a {
	color: #000;
	padding-bottom: 5px;
}

Save Changes
  1. Save your changes to the file
  2. Logout first if you're already logged in ► Close your browser ► Clear your browser cache.
  3. Log in again to see the tooltips
Last Edit: 5 months 1 week ago by aljawaid. Reason: ADDED CHANGES SECTION
The administrator has disabled public write access.

Better Tooltips 3 months 2 weeks ago #36142

  • nazeer
  • nazeer's Avatar
  • OFFLINE
  • Expert
  • admin@cynergy.solutions
  • Posts: 139
  • Thank you received: 14
  • Karma: 5
How do we hide the account information after user information from the tooltips ?
The administrator has disabled public write access.

Better Tooltips 1 month 2 weeks ago #36768

  • nazeer
  • nazeer's Avatar
  • OFFLINE
  • Expert
  • admin@cynergy.solutions
  • Posts: 139
  • Thank you received: 14
  • Karma: 5
Not relevant to my question.
The administrator has disabled public write access.
Time to create page: 0.165 seconds