How to add SPAN into tinyMCE dropdown list

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

How to add SPAN into tinyMCE dropdown list

Post by Tata » Fri May 02, 2014 10:36 pm

I need assign a part of text as a SPAN for links with styled tooltips. I can make it direct rewriting the link code in text mode. But it would make the work with a page mroe comfprtable and more secure, if there would be the SPAN choice in the dropdown list in tinyMCE (with headers, Ps, DIVs etc.). What and where shall be added?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: How to add SPAN into tinyMCE dropdown list

Post by cmb » Fri May 02, 2014 11:34 pm

Tata wrote:But it would make the work with a page mroe comfprtable and more secure, if there would be the SPAN choice in the dropdown list in tinyMCE (with headers, Ps, DIVs etc.).
The format list in TinyMCE is meant for block level elements--adding a span there would not work as expected, as it would mark the complete block as span. It might make sense, however, to add this span to the styles select box. This could be easily done by defining an empty rule for span.tooltip in the template's stylesheet, which will show up in the select box as "tooltip" and will create a <span class="tooltip">.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: How to add SPAN into tinyMCE dropdown list

Post by Tata » Sat May 03, 2014 7:24 am

Well, I will do it.
I have found this pure CSS based tooltip, ahich I like very much

Code: Select all

a.tooltip span{	
	display:none;
	color:#fff;
	background:rgba(51,51,51,0.75);
	padding:20px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	max-width:500px;
	position: absolute;
	z-index:10;
}
a.tooltip { display: inline-block;}
a.tooltip:hover span{ display:block; }
Seems to work. I have extended the stylesheet:

Code: Select all

.tooltip span.tooltip_content{/* keep empty - assign the whole tooltip incl. Tooltip Header*/}
a.tooltip span{	
	display:none;
	color:#fff;
	background:rgba(51,51,51,0.75);
	padding:20px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	max-width:500px;
	position: absolute;
	z-index:10;
}
a.tooltip { display: inline-block;}
a.tooltip:hover span{ display:block; }
a.tooltip em{font-weight: bold; background: rgba(255,255,255,0.5); display: block; padding: 3px 0; margin-bottom: 10px;}
To make it easy:
1. Write the Paragraph.
2. Highlight entire TOOLTIP CONTENT incl. TOOLTIP HEADER - add the "tooltip_content" class
2. Highlight the TOOLTIP HEADER - add <i> style
4. Highlight the whole Paragraph - make a link to href="#"

You get:

Code: Select all

<a class="tooltip" href="#">LINKED TEXT <span class="tooltip_content"><em>TOOTIP HEADER</em> This is the content of tootip</span></a>.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply