How to place a button in a div tag

CountLessQ

i have this sample: http://live.datatables.net/juxogora/1/edit I can't seem to display the btn in the bottom left of the fixed footer div tag.
Also I can't disable the hoover affect. I tried this:
.dt-button.red.tooltip {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.dt-button.red:hover .tooltip {
visibility: visible;
}

                                                    .dt-buttons .dt-buttons:hover {
                                                        background: none;
                                                    }

                                                    .dt-buttons .dt-buttons:active {
                                                        background: none;
                                                    }

Thank you

kthorngren

You can use the Direct Insertion method to place the button where you would like. Remove the B from your dom option.

See if the buttons.buttons.titleAttr option will do what you want for the tooltip.

Kevin

CountLessQ

@kthorngren for the title attr works great. For the btn location. when I remove the B from dom it disappears, also I tried this:
table.buttons().container().appendTo( $('.div', table.table().container() ) );
No change happened.

kthorngren

table.buttons().container().appendTo( $('.div', table.table().container() ) );

I suspect the selector ($('.div', table.table().container() )) you are using is not correct. Please provide a link to your page or a test case so we can take a look.

Kevin

CountLessQ

This is the link for the test case : http://live.datatables.net/juxogora/1/edit

kthorngren

Here is your example updated with table.buttons().container():
http://live.datatables.net/juxogora/1/edit

Kevin

CountLessQ

I am sorry i don't understand. The button is still not inside( bottom left) the footer div tag.

kthorngren

Sorry, posted the wrong link:
http://live.datatables.net/jejurije/1/edit

Kevin

CountLessQ

Can I ask how to remove the button hover affect.

CountLessQ

@kthorngren An important issue is that if the page is small (my case) the btn will be centered in the middle i tried div tag col-sm-12 col-xs-12 and

    .dataTables_wrapper .dt-buttons {
      float:left;
    } same issue

kthorngren

Maybe Allan's answer in this thread will help:
https://datatables.net/forums/discussion/comment/136639/#Comment_136639

If not please update the test case so we can see where you are at.

Kevin

CountLessQ

I added this to the sample and worked, thank you:
css

      .dt-button {
                float: left;
                text-align: left;
            }

in js:
dom: 'rtip',

CountLessQ

http://live.datatables.net/juxogora/1/edit