tooltip.js 37.4 KB
Newer Older
1001
1002
1003
1004
1005
1006
    $('#tt-content').trigger('mouseenter')
    equal(currentUid, $('#tt-content').text())
  })

  test('should not reload the tooltip if the mouse leaves and re-enters before hiding', function () {
    var titleHtml = function () {
fat's avatar
fat committed
1007
      var uid = 'fatTooltip'
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
      return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
    }

    var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
      .appendTo('#qunit-fixture')

    $tooltip.bootstrapTooltip({
      html: true,
      animation: false,
      trigger: 'hover',
      delay: { show: 0, hide: 500 },
      container: $tooltip,
      title: titleHtml
    })

    var obj = $tooltip.data('bs.tooltip')

    $('#tt-outer').trigger('mouseenter')

    var currentUid = $('#tt-content').text()

    $('#tt-outer').trigger('mouseleave')
    equal(currentUid, $('#tt-content').text())

fat's avatar
fat committed
1032
1033
1034
    debugger

    ok(obj.getHoverState() == 'out', 'the tooltip hoverState should be set to "out"')
1035
1036

    $('#tt-content').trigger('mouseenter')
fat's avatar
fat committed
1037
    ok(obj.getHoverState() == 'in', 'the tooltip hoverState should be set to "in"')
1038
1039
1040
1041

    equal(currentUid, $('#tt-content').text())
  })

1042
1043
  test('should position arrow correctly when tooltip is moved to not appear offscreen', function (assert) {
    var done = assert.async()
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055

    var styles = '<style>'
        + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
        + '.tooltip { position: absolute; }'
        + '.tooltip-arrow { position: absolute; width: 0; height: 0; }'
        + '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; }'
        + '</style>'
    var $styles = $(styles).appendTo('head')

    $('<a href="#" title="tooltip title" style="position: absolute; bottom: 0; right: 0;">Foobar</a>')
      .appendTo('body')
      .on('shown.bs.tooltip', function () {
fat's avatar
fat committed
1056
        var arrowStyles = $('.tooltip').find('.tooltip-arrow').attr('style')
1057
1058
1059
1060
1061
1062
        ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly')
        $(this).bootstrapTooltip('hide')
      })
      .on('hidden.bs.tooltip', function () {
        $styles.remove()
        $(this).remove()
1063
        equal($('.tooltip').length, 0, 'tooltip removed from dom')
1064
        done()
1065
1066
1067
1068
1069
1070
1071
1072
1073
      })
      .bootstrapTooltip({
        container: 'body',
        placement: 'top',
        trigger: 'manual'
      })
      .bootstrapTooltip('show')
  })

1074
  test('should correctly position tooltips on transformed elements', function (assert) {
1075
1076
1077
1078
1079
1080
    var styleProps = document.documentElement.style
    if (!('transform' in styleProps) && !('webkitTransform' in styleProps) && !('msTransform' in styleProps)) {
      expect(0)
      return
    }

1081
    var done = assert.async()
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100

    var styles = '<style>'
        + '#qunit-fixture { top: 0; left: 0; }'
        + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
        + '.tooltip { position: absolute; }'
        + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
        + '#target { position: absolute; top: 100px; left: 50px; width: 100px; height: 200px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }'
        + '</style>'
    var $styles = $(styles).appendTo('head')

    var $element = $('<div id="target" title="1"/>').appendTo('#qunit-fixture')

    $element
      .on('shown.bs.tooltip', function () {
        var offset = $('.tooltip').offset()
        $styles.remove()
        ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
        ok(Math.abs(offset.top - 126) <= 1, 'tooltip has correct vertical location')
        $element.bootstrapTooltip('hide')
1101
        done()
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
      })
      .bootstrapTooltip({
        container: 'body',
        placement: 'top',
        trigger: 'manual'
      })

    $element.bootstrapTooltip('show')
  })

1112
})
For faster browsing, not all history is shown. View entire blame