This is a migrated thread and some comments may be shown as answers.

Trying to get span text Not to display

2 Answers 119 Views
Editor
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 28 Sep 2010, 07:35 PM
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>

2 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 30 Sep 2010, 11:53 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
John
Top achievements
Rank 1
answered on 30 Sep 2010, 07:29 PM
Great!  Thanks!  That did the trick!
Tags
Editor
Asked by
John
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
John
Top achievements
Rank 1
Share this question
or