CMSimple_XH–Forum

Posted: **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?

Posted: **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">.

Posted: **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_XH–Forum

How to add SPAN into tinyMCE dropdown list

How to add SPAN into tinyMCE dropdown list

Re: How to add SPAN into tinyMCE dropdown list

Re: How to add SPAN into tinyMCE dropdown list