How to add SPAN into tinyMCE dropdown list
How to add SPAN into tinyMCE dropdown list
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.
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.
Re: How to add SPAN into tinyMCE dropdown list
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">.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.).
Christoph M. Becker – Plugins for CMSimple_XH
Re: How to add SPAN into tinyMCE dropdown list
Well, I will do it.
I have found this pure CSS based tooltip, ahich I like very much
Seems to work. I have extended the stylesheet:
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:
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; }
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;}
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.
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.