I want customize tiles. I changed tiles size and I want change the hover behaviour. If you enter mouse on tile then the ms-tileview-tile-detailsBox cover all image (in ms-tileview-tile-detailsBox top is setting to 0px). I would like it to cover image in 80% height, so I have to change the top to 15px.

The tile:

enter image description here

On mouse enter this looks like that:

enter image description here

But I would like to tile looks like that (on mouse enter):

enter image description here

I found in sp.ui.tileview.js method that set this:

$o_0: function SP_UI_TileView_TileViewRenderer_Tile$$o_0() {
    if (this.$8_0) {
    else {
    var $v_0 = this.$6_0;

    if ($v_0) {
        if (SP.ScriptHelpers.isNullOrUndefinedOrEmpty($v_0.style.top)) {
            $v_0.style.top = (this.$8_0 ? this.$N_0 : 0) + 'px';
            SP.UI.TileView.Utilities.$L($v_0, '0px');
        var $v_2 = new SPAnimation.State();

        $v_2.SetAttribute(1, 0);
        $v_2.SetAttribute(2, this.$8_0 ? 0 : this.$N_0);
        var $v_3 = new SPAnimation.Object(3, 0, $v_0, $v_2, null, null);

    var $v_1 = this.$5_0.getHandler(this.$8_0 ? 'OnDetailsExpanded' : 'OnDetailsCollapsed');

    if ($v_1) {
        $v_1(this, new Sys.EventArgs());

in this line the top is setting to 0px:

            $v_2.SetAttribute(2, this.$8_0 ? 0 : this.$N_0);

Does anyone know how can I override this?

  • Are you able to override top property?
    – Ali
    Commented Aug 28, 2014 at 0:49

1 Answer 1


Not recommended. As a last resort you can override the whole method with the below code:

    function OverridePromoAnimation(){
        SP.UI.TileView.TileViewRenderer.Tile.prototype.$o_0= function () {
             //overriden method body
    ExecuteOrDelayUntilScriptLoaded(OverridePromoAnimation, "sp.ui.tileview.js");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.