[SOLVED] hover info is not correct shown in simpellist

alexsupport
Topic Author
Offline
Senior Member
Posts: 53
Thanks: 9

[SOLVED] hover info is not correct shown in simpellist

5 years 9 months ago - 5 years 9 months 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!

Last edit: 5 years 9 months ago by alexsupport.

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

Egnarts
Offline
Elite Member
Posts: 301
Thanks: 137

Re: hover info is not correct shown in simpellist

5 years 9 months ago

#25795

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.

The following user(s) said Thank You: jojo12, alexsupport

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

alexsupport
Topic Author
Offline
Senior Member
Posts: 53
Thanks: 9

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

5 years 9 months ago - 5 years 9 months 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.

Code:

.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;
}

Last edit: 5 years 9 months ago by alexsupport.

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

help to better help you:

[SOLVED] hover info is not correct shown in simpellist

[SOLVED] hover info is not correct shown in simpellist

Re: hover info is not correct shown in simpellist

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