Trying to get span text Not to display

[John]

I am modifying some css that will be part of a document.  Inside the document I want an icon to be displayed and when the icon is clicked some css balloon hover text is displayed.  The problem is when I switch over from HTML view to Display view the span tag is displayed even though it should not be visible (see attached picture).

Thanks.

Code:

<STYLE type=text/css>
/*
 * Public Notes
 */
/*
 * Public Notes
 */
.PublicNotes{
   font-size: medium;
   color: #00FF00;
   font-weight: bold;
}
/*
 * Personal Notes
 */
/*------From Settings Configuration Page-------*/
/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
    background:url(images/Y-Note-icon16x16.png) top left no-repeat;
  clear:both;
}
a.tt span{
       display: none;

}

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
    padding: 15px 0 0 0;
    width:200px;
    color: #993300;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
}
a.tt:hover span.top{
    display: block;
    padding: 30px 8px 0;
    background: url(images/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
    display: block;
    padding: 0 8px;
    background: url(images/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
    display: block;
    padding:3px 8px 10px;
    color: #548912;
    background: url(images/bubble.gif) no-repeat bottom;
}
.privateNoteMark{
    position:relative;
    height:16px; /*dimensions of our image*/
    width:16px;
    background:url(images/Y-Note-icon16x16.png) top left no-repeat;
}

/*----End From Setting Configuration Page------*/
/*
 * Personal Dorment Notes
 */
/*
 * Personal Dorment Notes
 */
.PersonalNotesDorment{
   letter-spacing: -900pt;
    visibility:  hidden;
}
</STYLE>
 <A class=tt href="#"><IMG src="images/folder.gif">
   <SPAN class=tooltip>
      <SPAN class=top></SPAN>
      <SPAN class=middle> This is my Bubble Tooltip with CSS </SPAN>  <!--- THIS TEXT SHOULD NOT BE DISPLAYED!
      <SPAN class=bottom></SPAN>
  </SPAN>
</A>

[Dobromir]

Hi John,

The reason for this behavior is RadEditor's built-in content filter ConvertFontToSpan. This filter converts all span tags to font tags to ensure correct execution of some of the browser's standard commands. You can disable this filter using the following code-behind:

RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertFontToSpan);

In addition, please note that the CSS rule display:none is not applied to elements inside editable <iframe>. To hide elements you can use absolute positioning with negative top and left rules, e.g.:

.tooltip
{
    position: absolute;
    top: -9999px;
}
.tooltip:hover
{
   top: 10px;
}

I hope this helps.

Greetings,
Dobromir
the Telerik team

[John]

Great!  Thanks!  That did the trick!