Develop Reference

<sup> tag not working in WordPress

I am trying to use Trademark & Registered/Copyright symbols smaller in a WordPress site, but doing some of the standard methods for CSS were not working, and using what I have below maybe somebody has an idea on how I could expand.
Traditional/Normal way I would have done this:
Awesomesauce <sup>®</sup> would look like Awesomesauce® (the R is smaller than other text).
In the theme I am using, it was not doing that with that tag
I then tried <span style="font-size:6px;"> just see if it would do anything different. No luck.
So, I then approached it from a JavaScript side of things.
I started with my H1 tag
jQuery(function($){
var $el = $(".section_header .post_title");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
Since that works, how would I make the same work for body text because I cannot get it to work using the following code
jQuery(function($){
var $el = $(".wpb_text_column .wpb_wrapper p");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
jQuery(function($){
var $el = $(".section_header .post_title");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
What the HTML section looks like:

It's very normal that WP themes overwrite default browser style.
Try adding this to your custom.css file:
sup {
vertical-align: super;
font-size: smaller;
}
If you don't use custom style or child theme (Why use a Child Theme)
Then, add that code at the very bottom of your theme style css file.

I don't think that your issue is WordPress not recognizing the "sup" element. I support a few WordPress sites and "sup" works just fine whenever I use it. In your case, it appears that you are trying to use javascript (jQuery in particular within your WordPress site. WordPress does not process javascript reliably when found within a page. The documentation that I have read states that it is unsupported to use your own javascript on WordPress pages. However, I have succeeded in using Javascript in some pages within my WordPress site but with rather inconsistent results overall. I recommend that you format your text directly within the WordPress WYSIWYG editor as follows:
AWESOMESAUCE<sup>®</sup>

How to know that which js file or function is applying inline css into my element

I have inline css in my element which i do not want. There is a lot of js in my website and i do not know from where this css is coming.
Any help will be great.
Thanks in advance.

If I were you, I'd use removeAtrr() to remove all the inline style for that element:
$('#yourElementId').removeAttr("style");
After that, I'll set any style again through external css file or javascript if necessary.
Or if you want to override the inline styles, you can also try to use !important attribute in css.

I think the most solid way to do it would be to use the browser's dev tools to run through the js one line at a time. This will show you the exact point in the code execution where the style is added. Here's a link demonstrating how to use breakpoints: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints
Otherwise, if you're confident the code will be jQuery functions, do a search for .css(. If it's possible the change is made without jQuery, search for .style.. Some other possibilities are fadeIn, fadeOut, and animate. Once you find any of these, you can track what element they are being applied to to determine if they are relevant to the element you want to change.
Here are some selectors to look out for (vanilla JS and jQuery)
ClassName
document.getElementsByClassName('some-class');
$('.some-class');
ID
document.getElementById('some-id');
$('#some-id');
TagName
document.getElementsByTagName('tagNameHere');
$('tagNameHere');
QuerySelector
document.querySelector('cssSelectorHere');
document.querySelectorAll('cssSelectorHere');
$('cssSelectorHere');

If the problematic CSS is set with jQuery, you can hook into jQuery's cssHooks API to see when a particular CSS is being set. For example, if the problematic CSS is "margin-right" you can detect when it is being set and throw an exception so you can trace it through the browser's debugger:
var targetElement = document.getElement("checkme");
$(function() {
$.cssHooks["marginRight"] = {
set: function(node, value) {
if(node == targetElement) {
throw "stop that!";
}
else node.style.marginRight = value;
}
};
});

Copy elements pseudo :hover styles using jQuery

I am using Twitter Bootstrap and the uploadify library.
I have got the button uploadify creates styled using buttonClass: 'btn btn-primary' and I resize the object (which does not take into account padding etc by itself) using:
var uploader = $('#document_upload_'+variant_id);
var button = $('.uploadify-button', uploader);
var swfobject = $('object', uploader);
swfobject.css({
height: button.outerHeight(),
width: button.outerWidth()
});
Which all works great, the only problem is that we lose the hover styles on the button.)
So, we need to style the button using it's hover styles when the object is hovered over.
I am aware that the below won't work:
swfobject.hover(
function(){button.mouseover();},
function(){button.mouseleave()}
);
But as this is being used in a general setting, where all the sites are using bootstrap, but they are styled differently (and I cannot modify the core bootstrap files) I cannot simply apply another class, that has the same as the hover pseudo classes.
So, is there a way in jQuery to copy an elements "hover styles"?

Is there a way in jQuery to copy an elements "hover styles"?
Not easily. You could listen to jQuery.hover() and use jQuery.css() to get the custom CSS, iterate over styles in document.styleSheets or you could try a library like jss:
jss('.button:hover').get()['color']
JSS JSFiddle: http://jsfiddle.net/7kEJ9/2/

Add a custom format option to CKEdtitor?

I'm sorry if this question has been asked before, I've tried googling/looking on here/browsing the CKEditor forums and not come up with anything that I can seem to understand and implement (apologies, I'm not that great at this JavaScript stuff)
Basically, I want to add one custom option to the format dropdown list of CKEditor, it should create a span with a class like below:
<span class="custom-font"></span>
I've tried using the below in the "config.js" file, but it doesn't seem to work:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;span'
config.format_span = { element : 'span', attributes : { 'class' : 'cutsom-font' } };
Can anybody point me in the right direction here?

The "format" only deals with block level elements so you can't use that to add span tag around selected text. You need "style" to do that. To add to the default styles that CKEditor comes with add your style object in the styles.js. That's where the default styles are defined. Also, you need to add "name" attribute to the object.
{ name: 'Your custom style', element: 'span', attributes: {'class':'custom-font'} }
If you want to make a list of your own styles to replace defaults you can find details HERE.
According to the link you can also use your own .js file to define styles or use stylesheet to fetch css styles.

Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?

I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).

I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler that retrieves the HTML from an attribute on the element. For instance
foo
That's perfectly valid HTML, and the bodyHandler would look something like
return this.attr("data-tooltip"));

I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.

I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)

This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/