Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: [SOLVED] hover info is not correct shown in simpellist

[SOLVED] hover info is not correct shown in simpellist 3 weeks 1 day ago #25792

Joomla: 3.9.x
JEM: 2.2.3
PHP: 7.2.9
component: simplelist

In my template there is a code missing....
I've got the same behaveure as on the DEMO page on this site: JEM DEMO pages
(in: Day layout, simplelist and the Search DEMO ;) )

In the heading of the table there are fields that can be selected for sorting the collum.
(Date, Title, Venue, City, Cathegory)
Like on the demo page its not correct working on my site.
An i mean aspecialy the HOVER INFO of the link.

Can anyone tell me what code i must add to my styles.css for correct vieuwing the hover info?
Thank you!

Please Log in or Create an account to join the conversation.

Last edit: by alexsupport.

hover info is not correct shown in simpellist 3 weeks 1 day ago #25795

  • Egnarts
  • Egnarts's Avatar
  • Away
  • Gold Boarder
  • Gold Boarder
  • Posts: 229
  • Karma: -3
  • Thank you received: 100
The tooltip has the css class "popover".

There is some conflict between your template and Joomla. The css class "hasPopover" of the column heading is a Joomla mechanic for showing tooltips that uses bootstrap. The problem is, joomla has two mechanics for tooltips. The already known "hasPopover" and the other "hasTooltip". And your template propably has just a css style for "hasTooltip" (.tooltip) and not for "hasPopover" (.popover).

Another problem is the wrong position of the tooltip, which is calculated dynamically. Eventually the solution is not only "just add some css styles". The position is calculated via javascript. So there may be something broken in your template/joomla.
Take a look at the responsive version of JEM: The Responsive JEM
The following user(s) said Thank You: jojo12, alexsupport

Please Log in or Create an account to join the conversation.

[SOLVED] hover info is not correct shown in simpellist 3 weeks 1 day ago #25796

Thank you (again) for pointing me in the wright direction….

Searching the forum for:

.hasPopover

brought 6 items....

One of these items was interesting for me: (it explained a lot)

This is because the Joomla guys changed the css class from "hasTooltip" to "hasPopover" - which is unknown for a lot of site templates.


But then: how to work around?
Simply thinking: I looked into the template css from Protostar (supplied by Joomla)...
I took all the .popover code's
and placed them into the style.css of my template (written for older Joomla).

I uploaded the file, refreshed (ctrl+F5) the page and: Voila! It's working fine.
Pagination is good and behavure as aspected!

Hope some else has benefid of this tip.


.popover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1060;
	display: none;
	max-width: 276px;
	padding: 1px;
	text-align: left;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	white-space: normal;
}
.popover.top {
	margin-top: -10px;
}
.popover.right {
	margin-left: 10px;
}
.popover.bottom {
	margin-top: 10px;
}
.popover.left {
	margin-left: -10px;
}
.popover-title {
	margin: 0;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.popover-title:empty {
	display: none;
}
.popover-content {
	padding: 9px 14px;
}
.popover .arrow,
.popover .arrow:after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.popover .arrow {
	border-width: 11px;
}
.popover .arrow:after {
	border-width: 10px;
	content: "";
}
.popover.top .arrow {
	left: 50%;
	margin-left: -11px;
	border-bottom-width: 0;
	border-top-color: #999;
	border-top-color: rgba(0,0,0,0.25);
	bottom: -11px;
}
.popover.top .arrow:after {
	bottom: 1px;
	margin-left: -10px;
	border-bottom-width: 0;
	border-top-color: #fff;
}
.popover.right .arrow {
	top: 50%;
	left: -11px;
	margin-top: -11px;
	border-left-width: 0;
	border-right-color: #999;
	border-right-color: rgba(0,0,0,0.25);
}
.popover.right .arrow:after {
	left: 1px;
	bottom: -10px;
	border-left-width: 0;
	border-right-color: #fff;
}
.popover.bottom .arrow {
	left: 50%;
	margin-left: -11px;
	border-top-width: 0;
	border-bottom-color: #999;
	border-bottom-color: rgba(0,0,0,0.25);
	top: -11px;
}
.popover.bottom .arrow:after {
	top: 1px;
	margin-left: -10px;
	border-top-width: 0;
	border-bottom-color: #fff;
}
.popover.left .arrow {
	top: 50%;
	right: -11px;
	margin-top: -11px;
	border-right-width: 0;
	border-left-color: #999;
	border-left-color: rgba(0,0,0,0.25);
}
.popover.left .arrow:after {
	right: 1px;
	border-right-width: 0;
	border-left-color: #fff;
	bottom: -10px;
}

Please Log in or Create an account to join the conversation.

Last edit: by alexsupport.
  • Page:
  • 1
Time to create page: 0.495 seconds

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.

Follow us......