HTML code shown in tooltip

[ShredDead]

I am using v3.3.6 and have noticed that on my board within the tooltip that the following code is being shown in the sorting of "Title":

Code: Select all

<strong>Title</strong><br/>Click to sort by this column

and the same for "Hits"

Firebug shows the following code:

Code: Select all

<table class="zebra" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th align="left">
<a class="hasTooltip" title="<strong>Title</strong><br />Click to sort by this column" onclick="Joomla.tableOrdering('a.title','asc','');return false;" href="#">Title</a>
</th>
<th width="5%" align="center">
<a class="hasTooltip" title="<strong>Hits</strong><br />Click to sort by this column" onclick="Joomla.tableOrdering('a.hits','asc','');return false;" href="#">Hits</a>
</th>
</tr>
</thead>
<tbody>
</table>

Attached is a screenshot of what I am referring to:

Any help in resolving this would be greatly appreciated.

[jcms]

you should check some tooltip plugin:
http://extensions.joomla.org/extensions ... ltips/5882

or you want to disable this tooltip?

[ShredDead]

Thanks for responding. I do not wish to disable the tooltip. The code that I am getting is within Joomla for I have not added any CSS or additional tooltip plugins.

[kanor]

i think those would be bootstrap tooltips ... but the design is different
can you try setting data-html="true" to the anchors and see if it works and also make sure the bootstrap tooltip is initialized

[ShredDead]

Thanks for responding Kanor. I am still learning Joomla so what you mentioned is a bit above my head. Will you please add some guidance? Yes, the style is a bit different due to the template design from YooTheme Catalyst. A friend shared his template with me therefor I cannot ask technical advice on their forum.

[ShredDead]

I went into Template Manager: Edit Style and decided to enable Compression using the following settings within Warp Framework v6 ~ Combination + Minify + Data URIs + Gzip

I did this to see about performance on my testing server. Upon checking, I noticed that the tooltip is being shown correctly without having HTML code within. But by doing so has disabled JavaScript functions such as dragging, selecting, no-right click, and custom jQuery functions.

[kanor]

i thought you were using the default joomla setup ... as for the warp framework, i think it has a separate setting to enable bootstrap ... m not sure

for the js plugins getting disabled, it could be because of the compression, does firebug show some error?

also, can you provide a demo url to your site?

[ShredDead]

Firebug reports an error on line 1370

TypeError: jQuery(...).tooltip is not a function

Code: Select all

<link rel="stylesheet" href="/templates/yoo_catalyst/css/modules.css" />

Modules

Code: Select all

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

@import url(../warp/css/modules.css);


/* Module Title
----------------------------------------------------------------------------------------------------*/
.module .module-title { font-size: 22px; }
.module .module-title .subtitle {
	font-size: 12px;
	text-transform: uppercase;
}

/* Module Badges
----------------------------------------------------------------------------------------------------*/

.module .badge {
	top: -18px;
	right: -9px;
	width: 60px;
	height: 60px;
	background: url(../images/module_badges.png) 0 0 no-repeat;
}
 
.module .badge-hot { background-position: 0 0; }
.module .badge-top { background-position: 0 -60px; }
.module .badge-free { background-position: 0 -120px; }
.module .badge-new { background-position: 0 -180px; }


/* Module Icons
----------------------------------------------------------------------------------------------------*/

.module .module-title .icon {
	background-position: 0 0;
	background-repeat: no-repeat;
}

.module .module-title .icon-download { background-position: 0 0; }
.module .module-title .icon-twitter { background-position: 0 -30px; }
.module .module-title .icon-mail { background-position: 0 -60px; }
.module .module-title .icon-bubble { background-position: 0 -90px; }
.module .module-title .icon-login { background-position: 0 -120px; }
.module .module-title .icon-cart { background-position: 0 -150px; }


/* Module Type: Box
----------------------------------------------------------------------------------------------------*/

.mod-box {
	padding: 15px;
	border-radius: 10px;
	background: url(../images/module_box.png) 0 0 repeat;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.06),
		0 0 0 1px rgba(0,0,0,0.9),
		inset 0 0 5px rgba(0,0,0,0.4),
		0 3px 5px rgba(0,0,0,0.5),
		0 2px 0 1px rgba(0,0,0,0.5);
}

.mod-box .module-title { color: #BEC5CA; }


/* Module Type: Color
----------------------------------------------------------------------------------------------------*/

.mod-color {
	padding: 15px;
	border-radius: 10px;
}


/* Module Type: Metal
----------------------------------------------------------------------------------------------------*/

.mod-metal {
	border-radius: 10px;
	box-shadow:
		0 3px 5px rgba(0,0,0,0.5),
		0 1px 0 1px rgba(69,69,71,1.0);
}

.mod-metal > div {
	padding: 15px;
	border-radius: 10px;
	box-shadow:
		inset 0 1 0 rgba(255,255,255,1.0),
		inset 0 0 0 1px rgba(255,255,255,0.6),
		0 0 0 1px rgba(0,0,0,0.9),
		inset 0 0 5px rgba(0,0,0,0.4);
	color: #47474E;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.module.mod-metal .module-title .icon { background-image: url(../images/module_icons_metal.png); }

.mod-metal .badge {
	top: -10px; 
	right: -5px;
	background-image: url(../images/module_badges_metal.png);
}

.mod-metal .module-title { color: #5F616B; }

.module.mod-metal .module-title,
.module.mod-metal .module-title .color { text-shadow: 0 1px 0 rgba(255,255,255,0.3); }

.module.mod-metal .module-title .subtitle { color: #6B6C72; }

.module.mod-metal .module-title .color,
.mod-metal strong,
.mod-metal em,
.mod-metal code { color: #131415; }

.mod-metal a:hover {
	color: #000;
	text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mod-metal code,
.mod-metal em.box {
	border: 1px solid #bbb;
	border: 1px solid rgba(0,0,0,0.2);
	background: url(../images/code_metal.png) 0 0 repeat-x;
	box-shadow: 1px 1px 0 rgba(255,255,255,0.35);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}


/* Module Type: Line
----------------------------------------------------------------------------------------------------*/

.mod-line {
	padding: 0 0 0 25px;
	background: url(../images/module_line_h.png) 0 0 repeat-y;
}

.mod-line .badge {
	top: -20px;
	right: -15px;
}

.grid-h .mod-line { margin-left: 0; }

.grid-v .mod-line {
	padding: 25px 0 0 0;
	background: url(../images/module_line_v.png) 0 0 repeat-x;
}

.grid-v .mod-line .badge { top: -8px; }

#page .grid-h:first-child .mod-line { background: none; }
#page .grid-v:first-child .mod-line {
	padding: 0;
	background: none;
}

.mod-line .module-title { color: #BEC5CA; }


/* Modules
----------------------------------------------------------------------------------------------------*/

#headerbar .module {
	color: #fff;
	text-shadow:
		0 -1px 0 rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.7);
}

.menu-dropdown .module {
	margin: 0;
	padding: 10px;
}

[ShredDead]

Warp CSS Module that is imported from above CSS

Code: Select all

/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/*
 * Modules Style Sheet - Defines general module defaults, headings, badges and icons
 */


/* Module Badges
----------------------------------------------------------------------------------------------------*/

.module { position: relative; }

.module .badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}


/* Module Icons
----------------------------------------------------------------------------------------------------*/

.module .module-title .icon {
	display: block; 
	position: relative;
	top: -6px;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	overflow: hidden;
	float: left;
}


/* Module Defaults
----------------------------------------------------------------------------------------------------*/

.deepest > *:first-child { margin-top: 0; }
.deepest > *:last-child { margin-bottom: 0; }


/* Module Headings
----------------------------------------------------------------------------------------------------*/

.module .module-title { margin: 0 0 15px 0; }

/* Subtitles */
.module .module-title span.title { display: block; }

.module .module-title span.subtitle {
	display: block;
	margin-top: 2px;
	line-height: 14px;
	font-size: 12px;
	text-indent: 1px;
}

[sovainfo]

No need for css dumps when having a js problem!

[ShredDead]

The CSS dump that you so helped me with is what jQuery is questioning on line 1370 which is a link to modules.css that is why I included it. If not, someone may of questioned the css not being included. Also, "hasTooltip" is a css class found in the link that I am questioning in the first post.


Last night after reading through some other forums I came across a article that talked about jQuery not being handled correctly due to plugins/components that can contaminate the scripts. It was mentioned to try the plugin jQuery Easy.

After installing the plugin, placing in the last order, and reading the documentation I enabled only in the pages, within the advanced section of the plugin, that was giving me the problem rendering the tooltip. All is working accordingly.

[sovainfo]

The error is a script error, the css code is completely irrelevant. It is the tooltip javascript function that is not declared!

Just to confirm, are you saying jQuery Easy resolved your issue?

[ShredDead]

So, So...to answer your question regarding jQuery Easy. I'm still learning the Joomla platform and I'm more in-tuned to just CSS, HTML, and PHP without all the needed cross talk that is found within. Very confusing...

I found that my problem stemmed from the template running jQuery v2.1 as opposed to what Joomla was using v1.11.1. So I reverted to use the older version to match Joomla. Also jQuery Easy migrated older versions to v1.9

I thought $.noConflict(); would alleviate some problems but found that changing $ to jQuery worked.

[sovainfo]

Thanks for the detailed answer, appreciated. I am sure its going to be usefull to others as well.

[wolfspyryt]

I have same problem and am not clear what to do. Could I get some guidence please?