Search code examples
coldfusiontwitter-bootstrap-3cfdump

CFdump and Bootstrap tooltips fight each other

I attach Bootstrap tooltips via

$("[title]").tooltip({ html: true });

When I use a <cfdump>, title tags are attached all over the place. The start of the <cfdump> html looks like this

<table class="cfdump_struct">
        <tr><th class="struct" colspan="2" onClick="cfdump_toggleTable(this);" style="cursor:pointer;" title="click to collapse">struct</th></tr> 
                <tr>
                <td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:pointer;" title="click to collapse">Cause</td>
                <td>

Is there a way to keep, the two from stepping on eachother?

Solution

  • You shouldn't care because cfdump shouldn't be used in production, however you could just reduce the array returned by the jQuery selector. Not sure if this is the best way to do it, but it works:

    $("[title]").filter(function(){
    return ($(this).closest(".cfdump_struct").length == 0);
}).tooltip({ html: true });

    It runs the filter function for each item in the array returned by the selector. If it is within the CFDUMP table (signified by the .cfdump_struct class) it will not return it. You will have to extend this to other cfdump types (queries, etc) but this should get you started.

    Again, it really shouldn't matter since you shouldn't be using cfdump in production code anyway.

    You can see this in action here: http://jsfiddle.net/seancoyne/rc7TL/