Question

我有一个切换Bootstrap模式的按钮。按钮本身包含在div中，因此工具提示会在悬停时显示。

当我关闭模态时，按钮会聚焦，工具提示会显示而不会悬停元素。

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

 <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
             </div>

             <div class="modal-body">
                 <p>lorem ispum dolor sit amet</p>
             </div>


             <div class="modal-footer">
                 <button type="button" class="btn btn-primary">Submit</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
             </div>
         </div>
     </div>
</div>

在这里看到发生了什么：http://jsfiddle.net/6t3kxhLb/

到目前为止，我唯一可以解决的方法是在hidden.bs.modal事件触发时模糊按钮。但我对结果并不满意。

这是我的解决方法：

$('#modal').on('hidden.bs.modal', function(event){
    setTimeout(function(){
      $('[data-toggle="modal"]').blur();
    });
 });

当模态关闭时，你们知道有什么方法可以防止对切换按钮的关注吗？

Answer 1

根据Bootstrap documentation，您需要指定触发工具提示的内容。选项包括click，hover，focus和manual，而默认选项包含hover和focus。所以只需将data-trigger="hover"添加到您的元素：

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip" data-trigger="hover">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

示例小提琴：http://jsfiddle.net/6t3kxhLb/1/

Answer 2

我会在一段时间后讨论这个话题。我避免使用Bootstraps数据属性并使用Jquery。我通过以下方式实现了这一目标......

import tensorflow as tf
from tensorflow.python.framework import ops

shuffle = True
batch_size = 128
num_threads = 8

def get_data():
    """
    Return image_paths, labels such that label[i] corresponds to image_paths[i].

    image_paths: list of strings
    labels: list/np array of labels
    """
    raise NotImplementedError()

def preprocess_image_tensor(image_tf):
    """Preprocess a single image."""
    image = tf.image.convert_image_dtype(image_tf, dtype=tf.float32)
    image = tf.image.resize_image_with_crop_or_pad(image, 300, 300)
    image = tf.image.per_image_standardization(image)
    return image

image_paths, labels = get_data()

image_paths_tf = ops.convert_to_tensor(image_paths, dtype=tf.string, name='image_paths')
labels_tf = ops.convert_to_tensor(image_paths, dtype=tf.int32, name='labels')
image_path_tf, label_tf = tf.train.slice_input_producer([image_paths_tf, labels_tf], shuffle=shuffle)

# preprocess single image paths
image_buffer_tf = tf.read_file(image_path_tf, name='image_buffer')
image_tf = tf.image.decode_jpeg(image_buffer_tf, channels=3, name='image')
image_tf = preprocess_image_tensor(image_tf)

# batch the results
image_batch_tf, labels_batch_tf = tf.train.batch([image_tf, label_tf], batch_size=batch_size, num_threads=num_threads)

Answer 3

这是我使用的解决方案，就像一个魅力：

$('.modal').on('hidden.bs.modal',function(event){
  event.stopImmediatePropagation();
});

在模态关闭后，如何防止焦点关注Bootstrap模式的切换按钮？

这是我的解决方法：

3 个答案: