Manipulate copy behavior

I have a table on my webpage, some cells has tool tip on it. Those cell look something like
<td>
Cell Value
<div class=‘tooltipContent’>…</div>
</td>

I notice when using IE, it tries to copy the content the tool tip and screws up the whole table when the user try to paste it to word or outlook. So what I tried to do is when the user selects something on the page I try going into the clipboard and remove all the tool top element from the keyboard. I have written something like this


        $(document).bind('copy', function (e) {
            var html = ''
            if (typeof window.getSelection != 'undefined') {
                var sel = window.getSelection()
                if (sel.rangeCount) {
                    var container = document.createElement('div')
                    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                        container.appendChild(sel.getRangeAt(i).cloneContents())
                    }
                    $(container).find('.tooltipContent').remove()
                    html = container.innerHTML
                }
                window.clipboardData.setData('text', html)
            }
            return false
        })

The problem now is the clipboard has the html as plain text. Is there a way to set the clipboard data as html? Or is there some other way to edit the clipboard without messing things up??

thanks

Hi there,

Welcome to the forums :slight_smile:

This sounds like very weird behaviour.
Could you post a link to a page where I can see this, or failing that, could you post enough code that I could reproduce this myself?

Thanks for the reply
I am giving up on this approach for the moment and using jquery ui tooltip to workaround this problem. I am guessing hikacking copy is not the way to go here

Indeed.
That’s basically what I would have suggested.
If one library is exhibiting strange or undesired behaviour, try swapping it out for another or writing your own.