Advertisement

HTML code shown in tooltip

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Locked
ShredDead
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

HTML code shown in tooltip

Post by ShredDead » Wed Nov 26, 2014 4:03 am

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.
You do not have the required permissions to view the files attached to this post.

Advertisement
jcms
I've been banned!
Posts: 2233
Joined: Wed Nov 19, 2014 9:23 am

Re: HTML code shown in tooltip

Post by jcms » Wed Nov 26, 2014 4:20 am

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

or you want to disable this tooltip?

ShredDead
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Wed Nov 26, 2014 4:27 am

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
Joomla! Guru
Joomla! Guru
Posts: 600
Joined: Wed Oct 17, 2012 7:38 am

Re: HTML code shown in tooltip

Post by kanor » Wed Nov 26, 2014 8:16 am

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
kanor

ShredDead
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Wed Nov 26, 2014 2:46 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Wed Nov 26, 2014 4:56 pm

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
Joomla! Guru
Joomla! Guru
Posts: 600
Joined: Wed Oct 17, 2012 7:38 am

Re: HTML code shown in tooltip

Post by kanor » Thu Nov 27, 2014 5:10 am

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?
kanor

ShredDead
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Sun Nov 30, 2014 7:59 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Mon Dec 01, 2014 1:43 pm

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
Joomla! Exemplar
Joomla! Exemplar
Posts: 8808
Joined: Sat Oct 01, 2011 7:06 pm

Re: HTML code shown in tooltip

Post by sovainfo » Mon Dec 01, 2014 1:50 pm

No need for css dumps when having a js problem!
Issue with migrating? Include logs/joomla_update.php in your report!
Blank screen? Verify pagesource for HTML code (javascript error)
Installation failing on populating database? Install with set_time_limit(0)
Document your customizations!

ShredDead
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Mon Dec 01, 2014 2:06 pm

:-\
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
Joomla! Exemplar
Joomla! Exemplar
Posts: 8808
Joined: Sat Oct 01, 2011 7:06 pm

Re: HTML code shown in tooltip

Post by sovainfo » Mon Dec 01, 2014 7:52 pm

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?
Issue with migrating? Include logs/joomla_update.php in your report!
Blank screen? Verify pagesource for HTML code (javascript error)
Installation failing on populating database? Install with set_time_limit(0)
Document your customizations!

ShredDead
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Fri Aug 01, 2014 2:34 pm
Location: United States
Contact:

Re: HTML code shown in tooltip

Post by ShredDead » Tue Dec 02, 2014 12:37 am

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
Joomla! Exemplar
Joomla! Exemplar
Posts: 8808
Joined: Sat Oct 01, 2011 7:06 pm

Re: HTML code shown in tooltip

Post by sovainfo » Tue Dec 02, 2014 2:13 am

Thanks for the detailed answer, appreciated. I am sure its going to be usefull to others as well.
Issue with migrating? Include logs/joomla_update.php in your report!
Blank screen? Verify pagesource for HTML code (javascript error)
Installation failing on populating database? Install with set_time_limit(0)
Document your customizations!

wolfspyryt
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Wed Feb 25, 2015 6:27 pm

Re: HTML code shown in tooltip

Post by wolfspyryt » Thu Jul 02, 2015 6:22 pm

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

Advertisement

Locked

Return to “General Questions/New to Joomla! 3.x”