tooltip.js 38.4 KB
Newer Older
1001
1002
1003
1004
1005
1006
1007
1008
1009

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

    $('#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
1010
      var uid = 'fatTooltip'
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
      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
1035
1036
1037
    debugger

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

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

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

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

    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
1059
        var arrowStyles = $('.tooltip').find('.tooltip-arrow').attr('style')
1060
1061
1062
1063
1064
1065
        ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly')
        $(this).bootstrapTooltip('hide')
      })
      .on('hidden.bs.tooltip', function () {
        $styles.remove()
        $(this).remove()
1066
        equal($('.tooltip').length, 0, 'tooltip removed from dom')
1067
        done()
1068
1069
1070
1071
1072
1073
1074
1075
1076
      })
      .bootstrapTooltip({
        container: 'body',
        placement: 'top',
        trigger: 'manual'
      })
      .bootstrapTooltip('show')
  })

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

1084
    var done = assert.async()
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094

    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')

1095
    var $element = $('<div id="target" title="1"></div>').appendTo('#qunit-fixture')
1096
1097
1098
1099
1100
1101
1102
1103

    $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')
1104
        done()
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
      })
      .bootstrapTooltip({
        container: 'body',
        placement: 'top',
        trigger: 'manual'
      })

    $element.bootstrapTooltip('show')
  })

1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
  QUnit.test('should throw an error when trying to show a tooltip on a hidden element', function (assert) {
    assert.expect(1)
    var $target = $('<a href="#" rel="tooltip" title="Another tooltip" style="display: none;">I am hidden</a>').appendTo('#qunit-fixture')

    assert.throws(function () {
      $target.bootstrapTooltip('show')
    }, new Error('Can\'t show a tooltip/popover on a hidden element'))

    $target.remove()
  })

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